1. Introduction to React Fundamentals
2. Styling in React Apps
3. React Hooks and Context
Challenge: World of Astronomy App
In this task, you will continue working on the same app, adding a filtration feature that allows users to filter planets by name.
To create the filtration component, we need to create a form that maintains the state of the input value. Additionally, we require a function that will respond to changes in the input value.
- Initialize the state for the input value using the
useStatehook. Set the initial value to an empty string (
- In the
useEffecthook, check the logic that will filter the data when the user changes the input field. Decide what should be included in the dependency array of the
useEffecthook to ensure it runs when necessary.
- Populate the
appDatavariable with the correct data. The
appDatavariable represents the
contextobject, and you need to include
- Get access to the
handleInputChangefunctions using the
2. For the
inputValuein the dependency array since the filtration depends on the user's input.
3. To set the data for
4. To access
handleInputChange, use the
Contextprovided as the value for the
Everything was clear?