Q
Q
qwexort2022-04-02 21:30:13
React
qwexort, 2022-04-02 21:30:13

How to filter on button click in react?

I can't filter by pressing buttons with names, even though the search filter works.

class Change extends Component{
constructor(props){
    super(props);
    this.state={
        data:[
            {name:'max'},
            {name:'vlad'},
            {name:'olga'}
        ],
        term: "",
        filtered:[
           
         ]
        
    }
}

}
commitInputChanges = (e) => {
    this.setState({ term: e.target.value });
  };

render(){
    const {data,term} = this.state;
    
    return(
        <div className="sss">
       
          <ButtonGroup aria-label='Basic example'>
         
              <Button variant='secondary' >Max</Button>
              <Button variant='secondary' >Vlad</Button>
              <Button variant='secondary' >Olga</Button>
          </ButtonGroup>
            <span> Введите имя ○ </span>
            <input type="text" onChange={this.commitInputChanges}  />
            {data.filter((item)=>{
                 if (term == '') {
                     return item
                 } else if (item.name.toLocaleLowerCase().includes(term.toLowerCase())){
                     return item
                 }
                
            }).map((item,key)=>{
               return(
                   <div key={key} className="users"> 
                    <p>{item.name}</p>
                 </div>
               )
                
            })}
        </div>
    )
}
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question