I am trying to filter the list of Pin-codes. I already tried filtering using Name, that the input takes Name as argument and it properly filters out the Result, but the same thing I try to do but here I input the pincode in the pincode input box, I don’t get any results. Can someone tell me why username is working but pin-code isn’t. The Code is added below :
Users.js
import thunkMiddleware from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import axios from 'axios';
const defaultState = {
all: {},
users: {}, // It should be empty during store init
pindata: {},
subjdata: {},
isDataInitialized: false, // You can add additional property to denote, that data is not fetched for the first time
subject: 'All',
class: 'All',
currentUser: '',
email: '',
loggedin: false,
registeredUser: false,
registeredUserData: {},
};
function rootReducer(state = defaultState, action) {
switch (action.type) {
case 'CLR':
return {
...state,
users: state.all,
pindata: state.all,
subjdata: state.all,
subject: 'All',
class: 'All',
};
case 'PIN':
const newArray0 = state.all.filter(user => user.pin == action.pin);
return {
...state,
pindata: newArray0,
subjdata: newArray0,
users: newArray0,
subject: 'All',
class: 'All',
};
case 'USERS':
const newArray8 = state.all.filter(
user => user.username == action.username
);
return {
...state,
pindata: newArray8,
subjdata: newArray8,
users: newArray8,
subject: 'All',
class: 'All',
};
default:
return state;
}
}
const store = createStore(rootReducer, applyMiddleware(thunkMiddleware));
export default store;
filter.jsx
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Dropdown, Form, Button, Row, Col } from 'bootstrap-4-react';
class filter extends Component {
state = {
content: '',
name: ''
};
handleNameChange = e => {
this.setState({
name: e.target.value,
});
};
handlePinChange = e => {
this.setState({
content: e.target.value,
});
};
handleSubmit = e => {
e.preventDefault();
this.props.pin(this.state.content);
this.props.username(this.state.name);
};
render() {
return (
<div>
<div
style={{
// marginTop: "2em",
textAlign: 'center',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Form inline my='2 lg-0' onSubmit={this.handleSubmit}>
<Row>
<Col>
<Form.Input
type='number'
onChange={this.handlePinChange}
value={this.state.content}
placeholder='Filter by Pin-Code'
mr='sm-9'
min='111111'
max='999999'
/>
</Col>
<Col>
<Form.Input
type='string'
onChange={this.handleNameChange}
value={this.state.name}
placeholder='Filter by Name'
mr='sm-8'
/>
</Col>
<Col>
<Button outline success type='submit' mr='sm-0' my='sm-0'>
Search
</Button>
</Col>
</Row>
</Form>
</div>
<Button secondary onClick={this.props.clr}>
X Clear Filters
</Button>
</div>
</div>
);
}
}
// export default filter;
const mapStatetoProps = state => {
return {
subject: state.subject,
class: state.class,
};
};
const mapDispatchtoProps = dispatch => {
return {
pin: pin => dispatch({ type: 'PIN', pin: pin }),
username: username => dispatch({ type: 'USERS', username: username }),
};
};
export default connect(mapStatetoProps, mapDispatchtoProps)(filter);
Source: Ask Javascript Questions