Search Filter input ReactJS

Question

I have class Comopnent :

  state = {
   names: ['first', 'second']
  };

  updateSearch = (event) => {
   let updatedList = this.state.names;
    updatedList = updatedList.filter(name=> {
     return name.toLowerCase().search(
       event.target.value.toLowerCase()) !== -1;
     })
   this.setState({names: updatedList});
  }


 render() {
  const names = this.state.names.map((name) => { return (
    <div key={name}>
      <span>{name}</span>
    </div>
  )})
  return (
   <div>
    <input 
      placeholder="Search" 
      type="text" 
      onChange={this.updateSearch} />
        {names}
   </div>
    )
}

When I type some text that agrees with the name, search is working, and only that name is showing, but when i remove text from input all names should show back, but they don't (only the previously searched name is displayed). Why?

Thanks for answers in advance!

Because after removing the name you are not setting up the state to initial one. this line " this.setState({names: updatedList});" update the state . — ashish sherawat
– ashish sherawat, Commented Dec 5, 2018 at 14:36

ashish sherawat · Accepted Answer · 2018-12-05 15:32:51Z

1

  Add one more val in state as initialName and in updateSearch set updateSearch value 
with initalNames.
Try This.
 state = {
   names: ['first', 'second'],
   intiailNames:['first','second']
 };

updateSearch = (event) => {
 let updatedList = this.state.intiailNames;
 updatedList = updatedList.filter(name=> {
 return name.toLowerCase().search(
   event.target.value.toLowerCase()) !== -1;
 })
this.setState({names: updatedList});
 }

answered Dec 5, 2018 at 15:32

ashish sherawat

712 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BartoszTermena Over a year ago

ok, I discovered myself how to do it well, but anyway thanks for help!

Collectives™ on Stack Overflow

Search Filter input ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related