How to use UseState with Object

 UseState with Object

So, in this article will gonna talk about the how to use useState hook with object , previously we talk about the useState with array and simple implications with some example and have looked why state management is important in react. If you haven't checkout the blog , please look into that or for other articles so then you can clearly understand further.

Let's start with our discussion , first create the react-app and import the useState hook from the react library and as we do always to initialize and destructuring into array which is two values , the current value of the state and setter function which can be named according to your preference just like we name the variables.

Now , initialize the object in the useState as a default value and also specified the properties with equivalent to the name attributes of the name field , so the confusion will not be there and if you wanted then can also name according to yourself.

In the example below we are taking the user first name and last name which will be manage by the react state management with useState object. The onChange event is triggered as user start typing and the value of the state updates. So, how to overwrite the object of only one property and not the other , if user only inputs the one field , it should not overwrite the other which is the main challenge to do.

After we will also look at the values of each property of object , so we can do the analysis with that and do update the state.


After setting up the user input field and the useState object , whenever the user writes something, the onChange event triggered which in result calls the handleChange function , where all the state update logic lies. In the handleChange function we have the event object which is being provided by the javascript whenever we defined the function we get access to the event object.

If you observe , there is the name attribute set to every input field set with their corresponding actions , the event object which is bind to every function when event triggered has something called target property which can point to name attribute and the value of  input text fields.

We will conditionally check with the name of input , and calls the setter function which updates the value of the state.

So , how are we updating the state exactly?  In react ,  the update of the state object is not provided by react and we have to do manually by spreading all the value of the state with the spread operator and type the key name which we want to change with the value which is written by the user (event.target.value) and that's how other properties state changes. There are two methods from which we can update the state , first method is shown and it is commented line and the second method is the function where the previous value is remembered by the state and it is more performance optimized method , where we spreading out the previous value of the state and overwrite the property value which is written by the user.


There is also a third method to update the state of the object , by the modern javascript way , where we take out the values in constant from event.target.name and event.target.value , after we spread out the previous values properties and the with some modern special syntax in javascript , the conditional statements is not needed to be written and  the lines of code is reduced with this method.


One special thing to note from this article ,  the value attribute is essential to write whenever we manipulates the form field which make the component controllable.
If you don't specify the value attribute and do not set the value , it will show the warning that the component is changing from controlled input to uncontrolled .


I hope this clears your all doubts when working with useState with object . So in conclusion we get to know that there are three methods from which you can update the state of the object and all three methods can be used according to your preference and we have also talk about the downfalls of each method.


Thank you for reading the blog post!








Comments

Post a Comment

Popular posts from this blog

Learn React Router v6 ( Part - 2)

Image
  Introduction In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc. Let's explore some advance concepts of react router makes react developers more simpler. 1) Loader  Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components We have two steps to implement loader into the system . First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where ...
Read more

Why use Typescript ?

Introduction When I was using JavaScript , there is an inside joke in our team if you don't know coding then you need to use typescript . As Typescript provides you the types that make you write better code with less mistakes before compilation.  It's all good using typescript but seriously why even barely use typescript for just types , if you know what you are coding , and know all you variables because you give them good naming that make you help understand the code of which is used for.   Obviously , if you write exactly you wanted and you are a solo developer without any team or any interference, why even bare learning types ? Why even bare learning typescript ? Correct question and on point ! But do you know  when you write code on Friday with the strategy you made and when you come again on Monday  , writing the code with the exact same strategy as Friday is not possible and  you can make mistakes . You know , time are bad sometimes and you can't rem...
Read more

What is Single Page Application Routing ?

Image
  Single Page Application Routing? Earlier , we used to serve different web pages for the URL whenever the user redirects to the different path and whole application reloads where the sending http request to backend makes the application slower . So , in react there is a package name React Router which makes the multi page application feel to the single page application and the navigation concept in react seems feasible . Single Page Application (SPA) where the whole application load at once and whenever user visits some path, it will fetch the data from the server for the particular component and make that page visible to the user which feels like multi page routing. React Router package manager installed by npm  , and very important concept in react for the navigation  without the react router we cannot perform navigation in the single page application . There are three steps to implement the react router and navigate through the different components after installi...
Read more