Как сделать простой фильтр на react?

Question

[qwexort]

Начал изучать реакт пишу свой первый проект просто для практики. Сколько часов уже сижу и не могу понять логику кода для реализации фильтра. Нужно в инпут написать страну и товар который имеет значение из массива этой страны будет отображаться . Код :

class OurCoffee extends Component{
    constructor(props){
        super(props);
        this.state ={
            data :[
                {name:'AROMISTICO Coffee 1 kg',country:'Brazil',price:6.99},
                {name:'AROMISTICO Coffee 1 kg',country:'Kenya',price:6.99},
                {name:'AROMISTICO Coffee 1 kg',country:'Columbia',price:6.99}
                ],
                term:''
        }    
    }
commitInputChanges = (e) =>{
        this.setState({term: e.target.value})
        }
    render(){
       return(
            <div>
                 <div className="filter">
                        <div className="filter_first">
                            <h2>Looking for</h2>
                            <input type="text" 
                            placeholder="start typing here" 
                            onChange={this.commitInputChanges} />
                        </div>
                      
                 </div>
                 <div className="product"> 
                          <img src={coffee} alt="" />
                          <h2 className="item_name">{data.name}</h2>
                          <h2 className="item_from">{data.country}</h2>
                          <h2 className="item_price">{data.price}</h2>
                          </div>
            </div>
        )
    }
}


export default OurCoffee;

Answer 1

[HealSpirit]

class OurCoffee extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [
        { name: "AROMISTICO Coffee 1 kg", country: "Brazil", price: 6.99 },
        { name: "AROMISTICO Coffee 1 kg", country: "Kenya", price: 6.99 },
        { name: "AROMISTICO Coffee 1 kg", country: "Columbia", price: 6.99 }
      ],
      term: ""
    };
  }

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

  render() {
    const { data, term } = this.state;

    return (
      <div>
        <div className="filter">
          <div className="filter_first">
            <h2>Looking for</h2>
            <input
              type="text"
              placeholder="start typing here"
              onChange={this.commitInputChanges}
            />
          </div>
        </div>
        {data
          .filter((item) =>
            item.country.toLowerCase().includes(term.toLowerCase())
          )
          .map((item) => (
            <div key={item.country} className="product">
              <img src={"coffee"} alt="" />
              <h2 className="item_name">{item.name}</h2>
              <h2 className="item_from">{item.country}</h2>
              <h2 className="item_price">{item.price}</h2>
            </div>
          ))}
      </div>
    );
  }
}

export default OurCoffee;

Comments

[qwexort]

А если инпут пустой,как сделать что бы все дивы отображались?

[HealSpirit]

qwexort, так сейчас и работает. При пустом инпуте отображается 3 элемента

[qwexort]

HealSpirit, Не заметил пробел в стейте,спасибо.

Answer 2

[Damir Aushenov]

commitInputChanges = (e) =>{
var result = this.state.data.filter(ele=>ele.country == e.target.value);
this.setState({ 
 data:  result
})
        }