Wondering about setState of useState hook react js-CodePudding

here is my code:

//initial state object for dateForm
  const initialDateFormState = {
    date: today,
    time: "test",
  };
  // form data for date to search
  const [dateForm, setDateForm] = useState(initialDateFormState);

  //handle date Change
  const onChange = (e) => {
    setDateForm({ date: e.target.value });
    
    console.log(dateForm);
  };

and I was confused about :

That dateForm is const variable why after I use setDateform({ date: e.target.value }) It work ok not return a error. My action likely asign dateForm to new Object which action I cannot do with const variable.

console.log(dateForm); return // {date: '2022-08-30'} and the "time" property has disappeared

and when I set like this setDateform(date: e.target.value) browser have error That" I'm try to changing the controlled component to uncontrolled "

I think I misunderstand something. Hope you guys can help me figure out and Should I use spread operator everytime for setState?

Thanks for reading and wish you have a nice day!

CodePudding user response：

can you also share the code where you are using the onChange Method?

Passing a prop like value={undefined} is the same as not passing the value prop at all. so when you do setDateform(date: e.target.value) its not valid so value is set to undefined and you get this error

CodePudding user response：

If you are using object inside of setState then it's better to always use spread operator.

Let me explain. If you are using object inside of useState then most likely you will have multiple attributes. And in most of cases you would only want to change one of the attribute rather than all attributes. Let me explain with example

  const defaultPerson = {
     name: "",
     age: 20,
     address: "SOMEWHERE"
  } 
  const [person, setPerson] = useState(initialDateFormState);

In above code if you want to change a person name then rather than overriding whole object you can only change name using spread operator like this

// will override name only from person
setPerson({ ...person, name: 'SOME OTHER NAME' })

That will case the code to still have the same datatype(object) and structure (name, age & address) which is generally preferred.

Now if you want to change anything other than object the value inside of setState will replace the first constant so.

  const [name, setName] = useState("");
  // this is fine since the name is not object
  setName("SOME OTHER NAME")
 // This is not an object you would not want to spread it and change data type
 setName(...name)

So If you only want to change one property of object use spread operator.

PS: In your code whenever you change the data your state data structure is being changed now.

  //Starting state
  const initialData = {
    date: today,
    time: "test",
  };
  const [dateForm, setDateForm] = useState(initialData);


  const onChange = (e) => {
    // changes date form to dateForm = { date: e.target.value } 
    // notice now you don't have time props on it when this runs
    setDateForm({ date: e.target.value });

    // changing to below will only change date to target value but
    // you will still retain the time property
    setDateForm({ ...dateForm, date: e.target.value })
  }