React - Unable to modify input of childs child entity

Solution 1:

The problem is that the value of the input is coming from the answerList state (answerList.map(answer => ...)) but the onChange is updating a separate state called answer. You are getting confused because the argument you are passing to your .map and the state you want to update both have the same name: answer. But these are not the same.

This can be demonstrated by changing the name of the argument of the .map. You would be left with something like this:

{answerList.map((differentName, index) => (
  <div key={index}>
    <div className="form-group">
      <label htmlFor="explaination">Answer {index + 1}</label>

      <input
        onChange={(e) => {
          console.log(index);
          setAnswer({ ...answer, content: e.target.value });
        }}
        value={differentName.content}
        type="text"
        className="form-control stuff"
        id="explaination"
        placeholder="Enter answer display words"
        required
      />
    </div>
  </div>
))};
}

In order to change the value of the input, you have to make the onChange target the correct value.