Deleting items from an array React (infinite re-render loop error)

In a small React app, I’m trying to add delete functionality via a button for a list. Presently, I’m attempting this through the deleteItem function, which makes use of array.splice prototype method.

However, I’m encountering the error, Too many re-renders. React limits the number of renders to prevent an infinite loop.. What is the cause of this error? Shouldn’t this function only be invoked once, when the button is clicked?

And how can I resolve this error?

import "./styles.css";
import React, { useState, Fragment } from "react";

export default function App() {
  const [items, setItems] = useState(["first item"]);
  const [newItem, setNewItem] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    setItems([newItem, ...items]);
  };

  const handleChange = (event) => {
    setNewItem(event.target.value);
  };

  const deleteItem = (i) => {
    setItems(items.splice(i,1))
  }

  return (
    <div>
      <form>
        <input type="text" value={newItem} onChange={handleChange} />
        <input type="button" value="submit" onClick={handleSubmit} />
      </form>
      <ul>
        {items.map((i) => {
          return (
          <Fragment>
            <li>{i}</li>
              <button
                onClick= {() => deleteItem(i)}> // Amr recommendation
                delete 
              </button>
          </Fragment>
          );
        })}
      </ul>
    </div>
  );
}

Edit: I’ve taken user, Amr’s, recommendation and added a anonymous arrow function to the button. However, a new issue has arisen. I can delete any item up until there exists only one item in the array. The final item cannot be deleted. Why is this?

>Solution :

you are passing function reference on the onClick handler, change it to an arrow function that triggers the delete method onClick= {()=>deleteItem(i)}>

second thing is that you should add keys to your the parent component when you Map over components to prevent unnecessary behavior.

and the last thing is that in your delete method, you are using Array.prototype.splice(), which returns the item that will be removed, from the items, your requested/ required behavior can be achieved through the Array.prototype.filter() method

  const deleteItem = (i) => {
    setItems(items.filter((item) => item !== i));
  };

This is the final result, it should work fine.

import React, { useState, Fragment } from "react";

export default function App() {
  const [items, setItems] = useState(["first item"]);
  const [newItem, setNewItem] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    setItems([...items, newItem]);
  };

  const handleChange = (event) => {
    setNewItem(event.target.value);
  };

  const deleteItem = (i) => {
    setItems(items.filter((item) => item !== i));
  };
  console.log(items);
  return (
    <div>
      <form>
        <input type="text" value={newItem} onChange={handleChange} />
        <input type="button" value="submit" onClick={handleSubmit} />
      </form>
      <ul>
        {items.map((i, idx) => {
          return (
            <div key={idx}>
              <li>{i}</li>
              <button onClick={() => deleteItem(i)}>delete</button>
            </div>
          );
        })}
      </ul>
    </div>
  );
}