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: :~:text=state%20with%20JavaScript%3F-,To%20fix%20React%20input%20defaultValue%20doesn't%20update%20with%20state,default%20value%20of%20the%20input.

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 ponent 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!

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%20with%20JavaScript%3F-,To%20fix%20React%20input%20defaultValue%20doesn't%20update%20with%20state,default%20value%20of%20the%20input.

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 ponent 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!

• javascript
• reactjs
• arrays
• use-state

Share Improve this question Follow edited Aug 5, 2022 at 9:56 ahaMfM asked Aug 5, 2022 at 9:12 ahaMfMahaMfM 12522 silver badges1212 bronze badges 2

• What value did you set for a "student"? – Ivan Wu Commented Aug 5, 2022 at 9:44
• The Problem is that I got an array from the input elements. For example (1,2,3). When I now delete the second value (2) the array changes but the input's default values doesn't. Do you know how I can fix this? – ahaMfM Commented Aug 5, 2022 at 9:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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 plete reference about how to update React state arrays.

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.

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"