Get index of element to be deleted in array using .map (Javascript/React)

Question

I have an array of ingredients I want to display as a list in my React app. Associated with each item is a Delete button that when clicked, would remove that specific element from the array and re-render with the updated array.

Is there a way to find the index of the element and pass it onto the handleDelete() function?

Or is the only way to loop through all elements to find and remove?

handleDelete(id) {
   //use id to remove element from the array 
   //setState of newly filtered array 
}


render() {
    var ingredients = ["chicken", "rice"]
    return (

    <ul className="pantry"> 
    {
        ingredients.map((ingred, index) => {
            return <li key={ingred.index}><button onClick={this.handleDelete.bind(this, ingred.index)}>Delete</button>{ ingred }</li>
        })
    } 
    </ul>

    );
}

`index` and `ingred` are separate variables. `index` is not a property of `ingred` — charlietfl, Nov 29 '18 at 23:54
https://stackoverflow.com/questions/21281286/how-can-i-remove-an-element-from-a-list-with-lodash is the answer for your question. — misraX, Nov 29 '18 at 23:55
You can just store the index as a prop and use it in your function to remove from the array. — jmargolisvt, Nov 29 '18 at 23:56
@charlietfl that is an assumption you are making. The `ingred` variable can be an object with a property named index. — Ted, Nov 30 '18 at 00:01

Matthew Herbst · Accepted Answer · 2018-12-03T01:10:02.717

It seems you pretty much have it done. You just need to create a closure in your method and actually return the callback function. You also need to store the ingredients in state. (I've also cleaned the code up a bit.)

constructor(props) {
  super(props);

  this.state = {
    ingredients: ["chicken", "rice"],
  };

  this.handleDelete = this.handleDelete.bind(this);
}

handleDelete(indexToDelete) {
  //use id to remove element from the array 
  //setState of newly filtered array
  return (event) => {
    this.setState((currentState) => {
      const currentIngredients = currentState.ingredients;

      return {
        ingredients: currentIngredients.slice(0, indexToDelete - 1).concat(currentIngredients.slice(i, currentIngredients.length)),
      };
    });
  }; 
}

renderIngredient(ingredient, index) {
  return (
    <li key={ingred}>
      <button onClick={this.handleDelete(index)}>
        Delete
      </button>
      {ingredient}
    </li>
  );
}

render() {
    return (
      <ul className="pantry"> 
      {
        this.state.ingredients.map(this.renderIngredient)
      } 
      </ul>
    );
}

Get index of element to be deleted in array using .map (Javascript/React)

1 Answers1