Why does filter method work in one case while donot in other?

  filter, javascript, reactjs, redux

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

LEAVE A COMMENT