Remove element from useState array by index-CodePudding

SOLUTION: Update the key value for the input element to refresh the default value => content of the input element. Deleting an element from the array DID work. Thanks for your help! src: https://thewebdev.info/2022/05/12/how-to-fix-react-input-defaultvalue-doesnt-update-with-state-with-javascript/#:~:text=state with JavaScript?-,To fix React input defaultValue doesn't update with state,default value of the input.

I got an useState array in my code which represents a lisst of students: const [students, setStudents] = useState([""]); This array gets mapped to student elements: {students.map((student, index) => <Student setStudents={setStudents} students={students} id={index} key={index} content={student} />)} I also got an AddStudent element which adds students to the array.

function AddStudent(props) {

    const {setStudents} = props;

    return (
        <button className="change-student add-student" onClick={() => {
            setStudents((students) => [...students, ""])
        }}>
             
        </button>
    );
}

The RemoveStudent component is supposed to remove a student by its index in the array. I've tried many different ways but none worked correctly. How can I get it to work? Here is my code:

function RemoveStudent(props) {
    const {students, setStudents, id} = props;

    return (
        <button className="change-student remove-student" onClick={() => {
            let data = students;
            if(id > -1) {
                data.splice(id, 1);
            }
            console.log(data)
            // setStudents(data)
            // alternative:
            // setStudents(students.filter(index => index !== id)); // removes the last element in the list
            // doesn't work properly
        }}>
            -
        </button>
    )
}

Thanks for your help!

CodePudding user response：

2 things should be noted here:

While updating react state arrays, use methods that return a new array (map, filter, slice, concat),
rather than ones that modify the existing array (splice, push, pop, sort).

While updating React state using its previous value, the callback argument should be used for the state setter. Otherwise you may get stale values. (See React docs).

if(id > -1) {
    setStudents(students=> students.filter((s,i)=>(i != id)))
}

Consult this article, for a complete reference about how to update React state arrays.

CodePudding user response：

You need to copy the students array first and then try removing the student by index. I assume by id you mean index at which to remove the student. Then you can try something like:

function RemoveStudent(props) {
    const {students, setStudents, id} = props;

    return (
        <button
            className="change-student remove-student"
            onClick={() => {
                if(id > -1) {
                    const data = [...students]; // making a copy
                    data.splice(id, 1);         // removing at index id
                    console.log(data)
                    setStudents(data)
                }
            }}
        >
            -
        </button>
    )
}

With array.filter() you have a mistake in how you pass callback to filter() method. Please try the following:

setStudents(students.filter((,index) => index !== id));

Notice the index is second param of the callback so I used a , before index.

CodePudding user response：

After @Irfanullah Jan 's answer you should make sure how you show the student.

Here is the simple example:

const [students, setStudents] = useState([1, 2, 3]);

  return (
    <div>
      {students.map((student, index) => {
        return <div>{student}</div>; // show the value not the index
      })}
      <button
        onClick={() => {
          let id = 1;
          const copy = [...students];
          copy.splice(id, 1)
          console.log(copy)
          setStudents(copy);
        }}
      >
        -
      </button>
    </div>
  );

The code above will delete the student of "index==1"