Exercises:
- Exercise 1: Lifting State Up
- By this time, you have
Counter.jsx
and UserInfo.jsx
- Put the Counter
useState
to App.jsx
- Pass the
setCounter
function to Counter
component
- Pass the
counter
state to UserInfo.jsx
UserInfo
component should use the counter
state to show the age
- Exercise 2: Conditional Rendering
- Extend the
Counter.jsx
component to include the following features:
- Use conditional rendering to hide the increment button if the count reaches a 10
- Render a reset button that becomes visible only when the count is 10. Clicking the reset button should set the count back to 0.
- Practice using both ternary operators and logical && operators for conditional rendering.