How to use useState properly in this example?

Question

I have the following code:

const [data, setData] = useState({
        name: '',
        surname: '',
        email: '',
        password: ''   
    });

However, I need to have something like:

 const [name, setName] = useState('');
 const [surname, setSurname] = useState('');
 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');

but still keeping the setData() function, as it is used.

Answer 1

You can add a function which will accept all of your parameters and uses your defined useState methods.

This way you can customize and check for the value of the parameters too.

So it would be like below:

function Example() {
    const [name, setName] = useState('');
    const [surname, setSurname] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    function changeData({name, surname, email, password}){
        // call your setSates here
        setName(name)
        setName(surname)
        setName(email)
        setName(password)
    }

}

Notice that if you want to check the parameters to be passed you have to check them not to be undefined . If you don't check that it will set the variables to undefined

Answer 2

you can use setData to update individual properties.

const [data, setData] = useState({
    name: '',
    surname: '',
    email: '',
    password: ''   
});

const setValue = (fieldName, value) => setData({...data, [fieldName]: value});

// to update name
setValue("name", "bob");

Answer 3

If I am understanding correctly, what you're looking for is a solution like the following:

function MyComponent(props) {
  const [data, setData] = React.useState({
    name: '',
    surname: ''
  })

  // will use `useEffect` as an example with an API call
  React.useEffect(() => {
    SomeAPICall()
      .then((data) => {
        setData({ 
          ...data, 
          name: data.name
        })
      })
  })
}

When calling setState , you need to copy the current state and update the property/properties that you want.

---

Alternatively, you could use React.useReducer to accomplish the same thing:

function MyComponent(props) {
  const [state, setState] = React.useReducer((p, n) => ({ ...p, ...n }), {
    name: '',
    surname: ''
  });

  // will use `useEffect` as an example with an API call
  React.useEffect(() => {
    SomeAPICall().then((data) => {
      setState({ 
        ...state, 
        name: data.name
      })
    })
  })
}

Similarly, you need to take the old state and update it with new values, then pass it to setState .

---

The spread syntax copies properties of an existing object onto a new object. Here's some reference if you're not familiar with this approach:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax