02-state

Step 2 - State

We make an application feel interactive by changing how it looks when the user interacts with it. In React, we don't directly update the UI after user interactions. Instead, we update the state of a component, which causes the component to re-render.

And re-rendering the component with the new value of state causes the UI to change. So what a component renders depends on the value of the props passed into it and the internal state it maintains.

🏅 The goal of this step is to learn how to maintain state within a component.

Help! I didn't finish the previous step! 🚨

If you didn't successfully complete the previous step, that's okay! The steps are meant to push you. 😄

However, you may find yourself in a position where you app is not compiling, and it's preventing you from working on this step. No problem! Stash your changes in a new terminal window, and you should be good to continue:

git stash push -m "In-progress Step 1 exercises"

Your app should automatically reset and you should be able to continue on with the current step.

⭐ Concepts

• Maintaining component state with the useState hook
• Handling user interaction
• Handling HTML form elements
• Passing data back up the component tree

💡 Exercises

In App.js:

1. Update GiphySearch to maintain the query value using the useState hook
2. Call the setQuery update function in the onQueryChange prop of SearchForm
3. Update the text input in the SearchForm to set its value based on the query value and call the onQueryChange prop with the changed text value

(If at any point you get stuck, you can take a peek at the answers)

🧠 Elaboration & Feedback

After you're done with the exercise and before jumping to the next step, please fill out the elaboration & feedback form. It will help seal in what you've learned.

🤓 Bonus!

1. Display the query

Add a <p> below the <SearchForm> that will display "You are searching for [query] on Giphy." (with the query in bold).

2. Capitalize the message

Add a button that when clicked will toggle the entire query message between being upper-case and normal case.

📕 Resources

• Using the State Hook
• React Hooks: Array Destructuring Fundamentals
• Rules of Hooks
• Why React hooks?
• Handling Events
• Lifting State Up
• useState API Reference
• Four characters can optimize your React component
• SyntheticEvent
• Forms
• DOM Elements
• React Hooks 📺
• Introducing Hooks 📺
• eslint-plugin-react-hooks

👉🏾 Next Step

Go to Step 3 - Effects.