Trying to splice from state array from the index but instead end up splicing from first index to last

Question

I am trying to splice for the specific object when clicked, e.g my remove function. I have assigned index the value of i and have made a copy array of my state and attempt to splice it e.g arr.splice(i, 1), but it only splices from first to last, e.g if the last object's remove is clicked then the first object is removed and so on. I do not understand why my use of the index is not working correctly.

  var Recipes = React.createClass({
  // hook up data model
  getInitialState: function() {
    return {
      recipeList: [
          {recipe: "Malek's Protein Shake", ingredients: ['1 Glass of Whole Milk', '6 tablespoons of Peanut Butter', '1 scoop of Whey', '2 Bananas', '1 scoop of Vanilla Ice Cream']},
          {recipe: 'Pumpkin Pie', ingredients: ['Pumpkin Puree', 'Sweetened Condensed Milk', 'Eggs', 'Pumpkin Pie Spice', 'Pie Crust']},
          {recipe: 'Spaghetti with fried eggs', ingredients: ['Noodles', 'Tomato Sauce', 'Meatballs', '4 eggs', 'Ground black pepper']}
        ]
    }
  },

  ingredientList: function(ingredients) {
   return ingredients.map((ingredient, i) => {
    return (<li key={i} index={i} className="list-group-item">{ingredient}</li>)
   })
  },

  eachRecipe: function(item, i) {
    return (
        <div key={i} index={i} className="panel panel-default">
          <div className="panel-heading"><h3 className="panel-title">{item.recipe}</h3></div>
          <div className="panel-body">
            <ul className="list-group">
              {this.ingredientList(item.ingredients)}
            </ul>
            <button type="button" className="btn-sm btn-info" data-toggle="modal" data-target="#myModal">Edit</button>
            <button onClick={this.remove} type="button" className="btn-sm btn-danger">Remove</button>
          </div>
        </div>
    )
  },

  add: function(text) {
    var name = this.refs.userVal.value;
    var items = this.refs.newIngredients.value.split(",");
    this.setState({recipeList: [...this.state.recipeList, { recipe: name, ingredients: items }]})
  },

  remove: function(i) {
    var arr = this.state.recipeList.slice(); //copy array
    arr.splice(i, 1); //remove element
    this.setState({recipeList: arr}); //update state
  },

  render: function() {
      return (
        <div>
        <div>
        <button type="button" className="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Add Recipe</button>
        <div id="myModal" className="modal fade" role="dialog">
          <div className="modal-dialog">

          <div className="modal-content">
          <div className="modal-header">
        <button type="button" className="close" data-dismiss="modal">&times;</button>
          <h4 className="modal-title">Add a new recipe</h4>
          </div>
          <div className="modal-body">
          <form role="form">
                  <div className="form-group">
                    <label forName="recipeItems">Recipe</label>
                      <input ref="userVal" type="recipe" className="form-control"
                      id="name" placeholder="Enter Recipe Name"/>
                  </div>
                  <div className="form-group">
                    <label for="ingredientItems">Ingredients</label>
                      <input ref="newIngredients" type="ingredients" className="form-control"
                          id="ingredients" placeholder="Enter Ingredients separated by commas"/>
                  </div>
                  <button onClick={this.add} type="button" className="btn btn-default" data-dismiss="modal">Submit</button>
                </form>
          </div>
          <div className="modal-footer">
        <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
    </div>
    </div>
    <div className="panelArea">
        {
          this.state.recipeList.map(this.eachRecipe)
        }
    </div>
        </div>
        </div>
      );
    }
});

ReactDOM.render(
  <Recipes />,
  document.getElementById('master')
)

Answer 1

You may try in onClick event handler:

<button onClick={this.remove.bind(this, i)} type="button" className="btn-sm btn-danger">Remove</button>