I used splice to remove an element of an array passed as a props with indexOf method to navigate the element and instead it removed all but the first1

inputValue is an array of object that I want remove the element that I click its deleting button, "element" is a props passed after declaring it with useState, I used indexOf to navigate its place and remove it with splice. but instead it remove all the elements but the first one

import React from "react";

function Todo({ element, inputValue, setInputValue }) {
  const deleteHandler = () => {
    setInputValue(inputValue.splice(inputValue.indexOf(element), 1));
    console.log(inputValue.indexOf(element));
    console.log(element.id);
  };

  const completeHandler = () => {
    console.log(element.id);
    console.log(inputValue.indexOf(element));
  };

  return (
    <div className="todo">
      {element.text}{" "}
      <div>
        <button onClick={deleteHandler}>delete</button>{" "}
        <button onClick={completeHandler}>complete?</button>
      </div>
    </div>
  );
}

export default Todo;


Read more here: https://stackoverflow.com/questions/68474036/i-used-splice-to-remove-an-element-of-an-array-passed-as-a-props-with-indexof-me

Content Attribution

This content was originally published by ammar mohamed at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: