React: Uncontrolled input

Live code / CodeSandBox:

I have 5 inputs text, and every value should be store in the same object/state

  const initialFValues = {
    questionOne: "",
    questionTwo: "",
    questionThree: "",
    questionFour: "",
    questionFive: ""
  }

If someone open the second Input pressing first + button, and then CLOSE that second input with X Button I try to clean that input/state and object with
setValues({ questionTwo: “” })

what Im doing whrong? I been trying with a lot of combination, trying to clean that input and state but nothing seems works.
Thanks in advance!

You’re changing the object with five properties to an object with only one property. You need to keep all of the other properties intact.

The object you’re currently setting:

{
  questionTwo: ""
}

The object you want:

{
  questionOne: // the current value of questionOne
  questionTwo: "",
  questionThree: // the current value of questionThree
  questionFour: // the current value of questionFour
  questionFive: // the current value of questionFive
}
1 Like

So… setValues(…values, questionTwo: “” ) should work, or something like that? With the spread operator

Solution:

setValues((prev) => ({ ...prev, questionTwo: "" }));
1 Like