Mohamed El Hossiny

Back-end Developer

Front-end Developer

Freelancer

Senior Software Engineer

Mohamed El Hossiny

Back-end Developer

Front-end Developer

Freelancer

Senior Software Engineer

Blog Post

React Hooks Day 2

Day two  React_New_Updates

We will continue today from where we stopped the last time

UseState

last time we talked about how to to use useState inside a functional Component , and we were using it with initial state of int .

but what if we have a state of object .

So let’s see how to handle state of object inside useState .

const [state , useState] = setState({ name : ‘name’, age : 18 , location : ‘Cairo’ }) ;

so image we have this state and we need to update state for one item of the current state object like location we will do

UseState({location : ‘Egypt’})

this is correct but what will happen if we need to see our current state in console ,

you will find it only contains one item only not the full object .

## So note that useState remove the full state and create new one , with the update only , what that means .

this means your old state is deleted and replaced with the updated key only , ….

So to overcome this you need to combine the old state with the new updated object item but how ,

Simply by using Spread Operator for your prev State like that

UseState({…state, location: “egypt”})

we keep a snapshot of previous data and update only the required item in our state ,

Taggs: