Part 1 : How to update state in React.js
React separates passing data & manipulating data using props and state
Props are only being used for passing data. They are read-only which means that components receiving data by props are not able to change it. However, in some cases, a component may need to manipulate data and that’s not possible with props.
So React provides another feature for data manipulation which is known as State. In this article, you will learn what React’s “State” is and how to use it
lets start our journey,
what is state in react ?
- each component (class component )in react has its own state
- state is initialized inside its component’s constructor method.
- state is safe isolated place where component can stores its data
- one component does not know about others`s state
- state is a javascript object could hold one or multiple values
How to update state ?
in vanilla javascript we can update objects property like that
in react component we can not update state object directly
why ??
state object in react has different way to be updated
react provides a built in method called setState() to update the state object inside a component
as react work with an approach of re-rendering to display components with newely updated data
how to use setState() to update component state ?
assume that we have a form like below to enter data to schedule an interview ,this form holds inputs for interviewer name, interviewee info which is a nested object contains interviewee name , address which is also nested object contains city and street also nested object has name and street number
we need to update each change happen inside any input as soon as it detects and store it in its state property
our state properties :
first level property : interviewerName,
second level property : intervieweeName,
third level property : city,
fourth level property: streetName, streetNumber
1- Updating first level property
it matches interviewerName
we have input for interviewer name once we entered a value in it the on-change handler checks for input name in simple switch case if it is `interviewer-name` set its value in state directly, to the interviewerName property inside state
click submit and you will see your state updates printed to the console or,
you can use react chrome extension to detect state once it changed
just open your developer tool -> components tab -> search for your component
and you`ll get your component state like so,
2- Updating 2nd level property
it matches interviewee-name property
** Just add the interviewee name input to jsx part and its case to change handler method
the same scenario will be done on the new input , checking for input name then set its value to the matched state property So,
what is the difference ?
the difference is the way we updating non-1st level property inside state object, we have additional step,
Explanation:
1- we entered something into the input
2- on-change event fires, checks for input name and found it equals to `interviewee-name`
in switch case of `interviewee-name`
3- we go inside the state object and call a property called intervieweeInfo
4- spread intervieweeInfo properties
We use spread operator to make sure the other properties inside this object don`t change
Tip :
the first interviewInfo is the object key we can not spread it
the second intervieweeInfo we need to spread it as it refers to the object values we want to keep them,
In other words
…intervieweeInfo means that keep this object properties values the same as you found them
5- keep all values of intervieweeInfo object the same as you found it except one property called intervieweeName update it with the input value then break.
3- Updating 3rd level property
it matches city property
** Just add the rest of inputs to your jsx to continue our form
the same will be done to update city,but with single additional step which is going into intervieweeAddress object and inside it spread it to save the rest values of this object and change only one property which is called city with the input value
4- Updating 4th level property
it matches street name and number properties
the same will be done with street name and street number with another additional step which is ??
right, going into the street object and then spread it to save the number while we update name and save the name while we update number
finally, you can see the final result here :
** another approach of setting state is to pass function returns an object instead of direct object like so :
summary:
As we mentioned state in react is a javascript object holds properties
if it was a first level property update it directly as a pair of key:value
otherwise, use spread operator to update it
in both cases use setState() react method to update it
there will be part 2 of our series to talk about rules should be considered when u use setState().
helpful references :
