Change your delItem function to be higher order... You can have delItem() be a function that returns a function, and that function can use a parameter passed to the delItem() function... Pass the fruit!

delItem = (fruit) => () => {
  console.log('Click happened');

  // delete your fruit

Then bind onClick as follows:

<p className="del-btn" onClick={this.delItem(item)}> x </p>


Well, You can choose to send item ref directly in function onClick - this.delItem.bind(this, item)

delItem(item) {
   let fruits= this.state.fruits;

   function findFruit(element, index, array){
        return element==item;

   let index = fruits.findIndex(findFruit);
   this.setState({fruits : fruits});

Related Query

More Query from same tag