🔗 📦 Data flows down
🔗 🦻🏼 Events bubble up
Handling events
Learning Objectives
React Learn
Complete 🧑🏾🎓 Responding to Events
🧠 Think back to JS2 where you learned how to handle Events
Check your understanding
A: By passing the handler function as a prop, like onClick={handleClick}.
A: Accidentally calling the function (onClick={handleClick()}) instead of passing it.
🔗 🚦 Some components have state
🔗 🚦 Lift state up to a common parent
🔗 🚦 We don't always need state
State
Learning Objectives
React Learn
Complete 🧑🏾🎓State: A Component’s Memory
🧠 Search for “state” in the curriculum
Fun fact, you first met the concept of state in CYF Blocks
Check your understanding
A: State lets components remember information between renders.
A: Employ the useState Hook to create a state variable and a setter function.
Re-Rendering
Learning Objectives
React Learn
Complete 🧑🏾🎓 Render and Commit
Check your understanding
A: Triggering a render, rendering the component, and committing to the DOM
A: Because it should not change any objects or variables and always produce the same output for the same inputs.