scrimba
Learn React
Meme generator
Complex state: updating state objects
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Complex state: updating state objects
AboutCommentsNotes
Complex state: updating state objects
Expand for more info
App.js
run
preview
console
import React from "react"

export default function App() {
const [contact, setContact] = React.useState({
firstName: "John",
lastName: "Doe",
phone: "+1 (719) 555-1212",
email: "itsmyrealname@example.com",
isFavorite: true
})

let starIcon = contact.isFavorite ? "star-filled.png" : "star-empty.png"

function toggleFavorite() {
console.log("Toggle Favorite")
}

return (
<main>
<article className="card">
<img src="./images/user.png" className="card--image" />
<div className="card--info">
<img
src={`../images/${starIcon}`}
className="card--favorite"
onClick={toggleFavorite}
/>
<h2 className="card--name">
{contact.firstName} {contact.lastName}
</h2>
<p className="card--contact">{contact.phone}</p>
<p className="card--contact">{contact.email}</p>
</div>

</article>
</main>
)
}
Console
/index.html
-6:35