useState with object in React Hooks
Today we’ll show you how to use the useState with object in React Hooks. When we are dealing with the object in the state variable then we have to manage the object in different ways using React Hooks.
Let’s take a simple example to manage the user information such as name, email, and age in state variable using React Hooks.
If you are new in react hooks then I will recommend you to check the following articles to understand the Hooks.
useState with object in React Hooks
- Create a react application
- Add HTML element to prepare UI
- Add logic to manage object using useState
- Output
1. Create a react application
First of all we will have a startup react application to implement the demo. Here, we’ll use the create-react-app NPM Package. Run the following command to create a startup app.
1 | npx create-react-app usestate-with-object-react-hooks |
2. Add HTML element to prepare UI
As we are planning to collect the user information so we will add the three input elements i.e. name, email, and age. We have added the following code in the App.js component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import React from 'react'; function App() { return ( <div classname="App"> <h3>useState with object in React Hooks - <a href="https://www.cluemediator.com">Clue Mediator</a></h3> <br> <label>Name:</label> <input type="text" name="name"> <br><br> <label>Email:</label> <input type="text" name="email"> <br><br> <label>Age:</label> <input type="text" name="age"> <br><br> <label>Output:</label> <pre></pre> </div> ); } export default App; |
3. Add logic to manage object using useState
Let’s write logic to manage the object in the state variable. The handling objects in state variables using Hooks is slightly different than the setState method.
When we pass the updated state then setState will merge the state where the useState will assign a new state so that it does not merge the state.
Therefore we will manually merge the state by spreading the object in Hooks. Check out the following code to update the object in the state variable using Hooks.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | import React, { useState } from 'react'; function App() { const [user, setUser] = useState({ name: "", email: "", age: "" }); // handle change event of the input const handleChange = e => { e.persist(); setUser(prevUser => ({ ...prevUser, [e.target.name]: e.target.value })); } return ( <div classname="App"> <h3>useState with object in React Hooks - <a href="https://www.cluemediator.com">Clue Mediator</a></h3> <br> <label>Name:</label> <input type="text" name="name" value="{user.name}" onchange="{handleChange}"> <br><br> <label>Email:</label> <input type="text" name="email" value="{user.email}" onchange="{handleChange}"> <br><br> <label>Age:</label> <input type="text" name="age" value="{user.age}" onchange="{handleChange}"> <br><br> <label>Output:</label> <pre>{JSON.stringify(user, null, 2)}</pre> </div> ); } export default App; |
Here, we have used the previous state to update the state value. Check out the link below for more insight.
useState with the previous state in React Hooks
4. Output
Run the application and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!
![[Solved] Uncaught Invariant Violation: Rendered more hooks than during the previous render - Clue Mediator](https://www.cluemediator.com/wp-content/uploads/2022/06/solved-uncaught-invariant-violation-rendered-more-hooks-than-during-the-previous-render-clue-mediator.jpg)
When I am typing the last character doesn’t appear.
Example –
Name – Rohan
Email- [email protected]
Age- 30
Output-
{
“name”: “Rohan”,
“email”: “[email protected]”,
“age”: “3”
}
‘0’ of ’30’ is not getting printed. Any clue?
Hi Saswata,
You can check the GitHub source code or Stackblitz code. If it will not work then share your source code with me via Stackblitz/Codepen. We will be glad to help you!