How to filter and show array in react

Question

I want to filter and show the array by the placeid which is typed in input.

When I typed 1, I could show the array which have placeid 1.

However, after that, if I type 2, nothing come up.

My code is like this.

class List extends Component {
  constructor(props) {
    super(props)
    this.state = {
      val: ''
    }
  }
  _filterVal = e => {
    this.setState({ val: e.target.value })
  } 
  handleSetFilter = async () => {
      this.props.handleFilterVal(this.state.val);
  }
  render() {
    return (
      <div id="content">
        <div>
          <li>List</li>
          <input
            type="text"
            defaultValue=""
            onKeyUp={this._filterVal}
          />
          <button onClick={this.handleSetFilter} className='Filter'>Filter</button>
          { this.props.checkins.map((checkin, key) => {
            return(
              <div key={key}>
                <p>Placeid:{checkin.placeid}: ---- </p>
              </div>
            )
          })}
        </div>  
      </div>
    );
  }
}

export default PlaceList;

...
  handleFilterVal(val) {
    const line = this.state.lists.filter((item => {  
      return item.placeid.search( val ) !== -1; 
    }))
    this.setState({
      lists: line
    });
  }
...

Also, I want to show all array when I typed nothing.

Could you give me any advise please?

Answer 1

handleFilterVal(val) {
    const line = this.state.lists.filter((item => {  
      return item.placeid.search( val ) !== -1; 
    }))
    this.setState({
      lists: line
    });
  }

You are filtering here and setting your lists in state too be "line". When you click to filter again on another variable it will then filter on what is in "lists" (which is just that original value you put in.)

If you search for 1 first, line will be just the one item. Then when you filter again, you will be filtering on just that item.

You should probably have a section of your state for the filteredList and store the results of your filter there, instead of overwriting lists.