How to make a simple filter in react?

Question

React

Started learning React writing my first project just for practice. How many hours have I been sitting and can not understand the logic of the code for implementing the filter. You need to write the country in the input and the product that matters from the array of this country will be displayed. The code :

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

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;

Answer 2

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