Before hooks, a function component had to be converted to a class component if it needed to maintain state (or leverage lifecycle methods). A React Hook is a special function that lets you "hook into" React features. The useState hook lets you now add React state to function components.
🏅 The goal of this step is to switch from maintaining state with classes (using this.state & setState) to using the useState hook.
- Defining function components
- Maintaining UI state with the
useStatehook - Rules of hooks
In App.js, convert the App class component into a function component using the useState hook to maintain the state of the input field.
(If at any point you get stuck, you can take a peek at the answers)
After you're done with the exercise and before jumping to the bonuses, please fill out the elaboration & feedback form. It will help seal in what you've learned.
Add a <p> below the <form> that will display "You are searching for [query] on Giphy." (with the query in bold). The message should only display when the query is non-empty.
Add a button that when clicked will toggle the query message between being upper-case and normal case.
🔑 HINT: You will need to add a second useState
- Using the State Hook
useStateAPI Reference- React Hooks: Array Destructuring Fundamentals
- Four characters can optimize your React component
- React Hooks 📺
- Introducing Hooks 📺
- Rules of Hooks
eslint-plugin-react-hooksuseReducerAPI Reference- State and Lifecycle
- Public class fields
Go to Step 2 - Effects.