Reactjs search / filter function

Question

I tried to implement search/filter function on reactjs app. User can search anything and object should return based on search value. Search logic implemented in handleChange. Can anyone let me know where I made mistake?

It's doesn't return any errors. Just screen gone blank

Shipment.tsx

export class Shipment extends Component<object, ListInterface> {
  constructor(props: any) {
    super(props);
    this.state = {
      list: [] as any[],
      value: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    this.getShipmentList();
  }

  componentWillReceiveProps(nextProps: any) {
    this.setState({
      list: nextProps.list
    });
  }

  getShipmentList() {
    axios.get('http://localhost:3001/shipments').then((res: any) => {
      this.setState({ list: res.data });
    });
  }

  handleChange(e: any) {
    let currentList = [];
    let newList = [];

    if (e.target.value !== '') {
      currentList = this.state.list;

      newList = currentList.filter((item: any) => {
        const lc = item.toString().toLowerCase();
        const filter = e.target.value.toString().toLowerCase();

        return lc.includes(filter);
      });
    } else {
      newList = this.state.list;
    }
    this.setState({
      list: newList
    });
  }

  render() {
    return (
      <div>
        <Card className="Card">
          <CardContent className="Card-Content">
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <div className={`Card-Content__SearchBar`}>{statusList}</div>
                <div className="Card-Content__Location">
                  <TextField
                    id="outlined-name"
                    label="Search"
                    margin="normal"
                    variant="outlined"
                    fullWidth={true}
                    onChange={this.handleChange}
                  />
                </div>
              </Grid>
            </Grid>
          </CardContent>
        </Card>
        {this.state.list.map((item: any, index: number) => (
          <ShipmentList key={index} value={item} />
        ))}
      </div>
    );
  }
}

export default Shipment;

db.json

{
    "id": "S1002",
    "name": "PO89634, PO27X",
    "cargo": [
      {
        "type": "Bikes model 27X",
        "description": "100 Bikes model 27X",
        "volume": "100"
      }
    ],
    "mode": "air",
    "type": "LCL",
    "destination": "Saarbrücker Str. 38, 10405 Berlin",
    "origin": "Shanghai Port",
    "services": [
      {
        "type": "customs"
      }
    ],
    "total": "10000",
    "status": "COMPLETED",
    "userId": "U1001"
  },

When I start typing, Im list gone empty `ShipmentList`. Show nothing in screen and no error at all. — SKL, Aug 14 '19 at 15:52
You do not keep your original list. So, when you start filtering your list, you can not go back. You should have something like `filteredList` in your state and keep `list` untouched — Antoine Grandchamp, Aug 14 '19 at 15:55
@AntoineGrandchamp, can u show some example? How I can push `filteredList` to `ShipmentList` ? — SKL, Aug 14 '19 at 15:57
What part of res.data are you storing in your list? Your this.list is an array, the data you're getting back is an object. You're looping through an array of one object. — dar, Aug 14 '19 at 15:58

Clarity · Accepted Answer · 2019-08-14T16:03:37.690

4

Your list has a name prop, so you probably want to filter based on that

handleChange(e: any) {
  let list = this.state.list.concat();
  const {value} = e.target; 

  if (value) {
    list = list.filter((item: any) => {
      const name = item.name.toLowerCase();
      const id = item.id.toLowerCase();
      const filter = value.toLowerCase();

      return name.includes(filter) || id.includes(filter);
    });
  } 
  this.setState({
    list
  });
}

edited Aug 14 '19 at 16:03

answered Aug 14 '19 at 15:56

Clarity

10,730
2
25
35

is that possible filter by name and id? – SKL Aug 14 '19 at 16:00
1

Ok, added the `id` as well. – Clarity Aug 14 '19 at 16:03
Sweet, Thanks @Clarity – SKL Aug 14 '19 at 16:05

score 1 · Answer 2 · answered Aug 14 '19 at 16:08

first you are using componentDidMount(), you have to use componentWillMount() function to load server data into list state then create another filtered list state which will show you filtered data when you type in the input field. Don't overwrite your list data else you again have to fetch data from server. Use filteredlist for search. componentDidMount() runs after the render() function and your state won't be initialize to be used in render()


state =  {
list: [],
filteredlist: [],
values: ''
}

componentWillMount() {
    this.getShipmentList();
}

handleChange(){as above}

Reactjs search / filter function

2 Answers2