React 102 – Managing state in React with `onClick`

react-102.md

React 102

Managing state in React with onClick

State

• The term we use to refer to the value of some variable in <1> at a given moment in time is <2>
• Understanding how and when state <3> is critical to becoming a strong developer
• A hook is simply a <4> (before hooks, some developers would have called it a <5>)
• All hooks in React are <6> exports so to import a React hook, <7> are necesary
• Managing state requires a named <8> and a named <9> of your choice (the former holds a value while the latter sets the value)
• The syntax includes a <10> on an <11>
• The useState hook is <12> with useState()
• Passing an <13> to the useState hook is optional but doing so will set the <14>
• The value for state can be accessed anywhere within the <15> but must be enclosed within a set of <16>

Click handlers

• With React components, we no longer need the <17> method to listen for events, such as clicks
• And we don't need to worry about <18> either since it is no longer necessary (source)
• For click events, we use the <19> prop directly on the element
• The value for this prop is known as the <20>
• The <21> can be defined inline or as a separate function; in either case, it changes state via the named <22> defined in the syntax that calls the useState hook
• Whenever state changes, React automatically <23> the component so that UI properly reflects the change

---

Key terms and phrases

1. .addEventListener
2. argument
3. array
4. changes
5. curly braces
6. curly braces
7. destructuring assignment
8. event handler
9. event handler
10. event delegation
11. executed
12. function
13. helper function
14. initial state
15. JSX
16. memory
17. named
18. noun
19. onClick
20. re-renders
21. state
22. verb
23. verb