Challenge: Build a World of Astronomy App with Context
Task
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.
Instructions
In the App.jsx
:
- Initialize the state for the input value using the
useState
hook. Set the initial value to an empty string (""
). - In the
useEffect
hook, 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 theuseEffect
hook to ensure it runs when necessary. - Populate the
appData
variable with the correct data. TheappData
variable represents thecontext
object, and you need to includeinputValue
andhandleInputChange
for theFilter
component.
In the Filter.jsx
:
Get access to the inputValue
and handleInputChange
functions using the useContext
hook.
Takk for tilbakemeldingene dine!