I want to create poll/exercise form that update the value by useState. So, I created handleChange() to handle update from input form and that work perfeclt fine for the most of my input field except the one that is store state as object (I have state field that called answers to keep multiple answer choices from my poll/excercise as answer1 ... answer4) like this

const [pollValues, setpollValues] = useState({
    name: "",
    question: "",
    type: "",
    answers: {
      answer1: "",
      answer2: "",
      answer3: "",
      answer4: "",
    },
  }); 

and handleChange() use by passing event form input form:

 function handleChange(e) {
    const { name, value } = e.target;
    console.log(name, value);

    setpollValues((prev) => ({
      ...prev,
      [name]: value,
    }));
  }

and use it for handle input with name (that locate in main return() ), question, type work perfectly fine. but the poll answers choice, I make a sub-component in the same file and passing name as props to identify the choice

     <ChoiceAnswer type="required" name="answer1" choiceNumber="1" />
     <ChoiceAnswer type="required" name="answer2" choiceNumber="2" />
     <ChoiceAnswer type="optional" name="answer3" choiceNumber="3" />
     <ChoiceAnswer type="optional" name="answer4" choiceNumber="4" />

 const ChoiceAnswer = (props) => {
    const { type, choiceNumber, name } = props;
    if (type == "required") {
      return (
        <div
          className="d-flex flex-column "
          style={{
            rowGap: "0.5rem",
            margin: "0px",
            padding: "0px",
            width: "100%",
          }}
        >
          <div
            className="d-flex align-items-center"
            style={{
              padding: "1rem",
              border: "1.5px #ccc solid",
              borderRadius: "1rem",
              columnGap: "1rem",
            }}
          >
            <div style={{ width: "7rem" }}>
              <h5>ตัวเลือกที่ {choiceNumber}</h5>
              <p style={{ color: "red" }}>* จำเป็น</p>
            </div>

            <input
              type="text"
              style={{ width: "100%" }}
     
              id={name}
              name={name}
              placeholder="ใส่คำตอบ"
              onChange={handleChange}
              required
            ></input>
          </div>
        </div>
      ); else if (type == "optional") {...}

the problem that occurs with the answers only, cannot typing text in text field (try to console log and found that it can only update only 1 character at once cannot type in string) but If I delete the setState It will normally typable. So, I don't know what happend that make my answers field cannot typing and using handleChang() to update their values.

CodePudding user response：

There is a mistake in your handleChange function. answers are nested one more level.

Try like below.

function handleChange(e) {
    const { name, value } = e.target;
    console.log(name, value);

    setpollValues(prev => ({
        ...prev,
        answers: {
            ...prev.answers,
            [name]: value
        }
    }));
}