Intermediate
Fix mirrored state and an effect chain
This invoice has two anti-patterns from Topic 22.7. Switching the customer in #customer doesn't update the name field #name (it was copied into state once). The total and shipping are kept in state and updated by a chain of effects.
Fix both **without any useEffect**: make #name start from the newly selected customer's name every time the customer changes (the user can still edit it), and calculate the total and shipping during render.
#add adds an item of 10. #total must read Total: <sum> and #shipping must read Free shipping when the total is 50 or more, otherwise Shipping: 5.
What Check tests
- The name field can still be edited
- Choosing another customer resets the name field to that customer
- Adding an item updates total and shipping
- No useEffect is used
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.