Up until now, we've only worked with

simple state values like numbers

strings, and booleans. But most of the

time in real world applications, your

state will be more structured. In this

lesson, we'll learn how to work with

objects in state. Let's start fresh by

creating a new file. In the source

folder, create a new file, user

profile.jsx.

Scaffold, a simple component, and export

it. export conster profile is equal to

an arrow function. We'll return a div

that says user profile component. For

this component, we want to display a

user's name, age, and email. Since we

will be updating these values and the

values are related to each other, we'll

store them inside a single object in

state. import use state from react at

the top and this is a named import and

invoke it within the component as the

initial value to use state we will pass

an object with three properties name as

a string Bruce Wayne age as a number 30

and email as another string Batman

atjusticeleague.com

state returns two values and we'll Use

array dstructuring to call them user and

the setter function set user. Now let's

just display the values in the JSX so we

can see them in the browser. So within

the div tag add an H2 that renders user

dot name, a paragraph that renders the

age, user age, and another paragraph for

email user.

Pretty straightforward. just dot

notation to access each field. Let's

import the component in amp.jsx and

invoke it at the top import user profile

from dot / user profile and invoke the

component. Check the browser and you'll

see the component rendered with the

values we passed in the state name, age

and email. Now let's update just one of

these properties. We'll start with the

name. In the JSX, we'll add a button

with the text change name to Clark Kent

and an onclick handler that calls a

function called update name. Let's

define the function const update name is

equal to an arrow function. And we

already learned that the set state

function is what triggers a component

rerender. So we cannot directly update

the user object in the state user.name

is equal to Clark Kent will not work.

Instead we will call set user and pass a

new object. Since we are only updating

the name, we will pass a new object with

name set to Clark end. Let's also log

the user object to the console to see

what's happening. Right after you state

add a console log component rendering

user colon user save the file and back

in the browser open dev tools console

and we see Bruce Wayne's profile with

age and email the same object is logged

in the console age 30

email@justiceleague.com

and name Bruce Wayne. Now we clear the

console and click change name to Clark

Kent button. We can see the name updates

but the age and email disappear and the

console confirms it. The user object now

has only name property set to Clark

Kent. This is a super common mistake

beginners tend to make. When you call

set user, you're replacing the entire

user object. Since we only provided the

name property, that is all a new object

has. The age and email properties were

thrown away. Whenever we need to update

an object in state, we need to copy the

existing fields first and then override

the properties we need to change. And

the way we do that in JavaScript is with

the spread operator. So to set user pass

an object but first

copy all the existing properties by

spreading the current user object and

then override just the name. Let me

repeat that the three dots spread the

old object into the new one and then we

override just the property we want to

change. In this case we are overriding

the name property with Clark Kent. Let's

refresh the browser and try again.

Change name to Clark Kent. Perfect. The

name updates to Clark Kent, but the age

and email stay exactly the same as

before. Let's do one more quick update

to increase the age. Back in the JSX

let's add a new button. Increase age by

one. And on click, we'll assign a new

function called update age. Then define

the click handler. Update age is equal

to an arrow function. And I want you to

pause for a minute and try write the

update age function logic.

All right, here we go. Set user. We pass

in a new object. We first spread the

existing user object and we override

just age to user.h + one. Save the file.

Refresh the browser. Clear the console.

Increase age by one. And you can see age

is now 31. And the other two properties

stay untouched. Now what if we want to

update multiple properties at once? It's

still the same pattern. Spread first and

then override the properties we want to

change. So you can add a new button.

Update name and age. On click we assign

a function called update multiple and we

can define update multiple which is an

arrow function. We call set user and you

know the drill by now. Pass in an object

spread the existing object and override

both properties. We want to change name

to Clark Kent and age to 31. This is a

number.

Back in the browser, refresh. We have

Bruce Wayne, age 30. Update name and

age. Clark, age 31. As you can see, it's

pretty, much, the, same, pattern., All right,

let's take this one step further. We

will update our initial user object to

include an address. So address is an

object with city set to Gotham city and

country USA. Now we'll update the JSX so

we can see the address as well. After

email a paragraph tag city is going to

be user address city. I'll duplicate

this to render the country. This is

user.add address dot country. Take a

look at the browser and we see Gotham

City, country USA. Now let's add a

button to update just the city. So

button the text is going to be move to

metropolis.

On click is going to be a function

called update city which we will now

define. Const update city is equal to an

arrow function. We'll call set user

passing in an object. We spread the

existing user object and then we set the

address object city to metropolis.

If we save the file and head back to the

browser, refresh, we should see city

Gotham City. Click move to metropolis.

City is now metropolis, but the country

disappears. We've made the same mistake

as before, just at a deeper level.

spreading the user object only copies

the top level fields. So the address

property gets replaced entirely with our

new object that only contains city. To

fix this, we need to spread the nested

object too. So do dot user dot address

and then override the city property.

Back in the browser, refresh. City is

Gotham City. Move to metropolis. City is

metropolis but country remains USA.

We've successfully updated our state

object. Let me quickly summarize what

we've learned. Always use the setter

function to update state as changing the

object directly won't trigger a

rerender. Calling set state with an

object replaces the entire object. To

keep existing fields, always spread the

old object first. For nested objects

spread both the outer object and the

nested one.