Open chaesthetics opened 10 months ago
import { useState } from "react";
export default function App() {
const [greeting, setGreeting] = useState(
{
greet: "Hello",
place: "World"
}
);
console.log(greeting, setGreeting);
function updateGreeting() {
setGreeting(prevState => {
return {...prevState, place: "World-Wide Web"}
});
}
return (
<div>
<h1>{greeting.greet}, {greeting.place}</h1>
<button onClick={updateGreeting}>Update greeting</button>
</div>
);
}
import { useState } from "react";
export default function App() {
const [giftCard, setGiftCard] = useState(
{
firstName: "Jennifer",
lastName: "Smith",
text: "Free dinner for 4 guests",
valid: true,
instructions: "To use your coupon, click the button below.",
}
);
function spendGiftCard() {
setGiftCard(
prevState => {
return {...prevState, instructions: "Your coupon has been used.", valid: false};
}
)
}
return (
<div style={{padding: '40px'}}>
<h1>
Gift Card Page
</h1>
<h2>
Customer: {giftCard.firstName} {giftCard.lastName}
</h2>
<h3>
{giftCard.text}
</h3>
<p>
{giftCard.instructions}
</p>
{
giftCard.valid && (
<button onClick={spendGiftCard}>
Spend Gift Card
</button>
)
}
</div>
);
}