Tarea

En esta tarea, continuarás trabajando en la misma aplicación, añadiendo una función de filtrado que permita a los usuarios filtrar planetas por nombre.

Para crear el componente de filtrado, es necesario crear un formulario que mantenga el estado del valor de entrada. Además, se requiere una función que responda a los cambios en el valor de entrada.

Instrucciones

En App.jsx:

1. Inicializar el estado para el valor de entrada utilizando el hook useState. Establecer el valor inicial como una cadena vacía ("").
2. En el hook useEffect, revisar la lógica que filtrará los datos cuando el usuario cambie el campo de entrada. Decidir qué debe incluirse en el array de dependencias del hook useEffect para asegurar que se ejecute cuando sea necesario.
3. Completar la variable appData con los datos correctos. La variable appData representa el objeto context, y es necesario incluir inputValue y handleInputChange para el componente Filter.

En Filter.jsx: Acceder a inputValue y a las funciones handleInputChange utilizando el hook useContext.

1. Para inicializar el estado, utilizar el hook useState.
2. Para el hook useEffect, incluir inputValue en el array de dependencias, ya que el filtrado depende de la entrada del usuario.
3. Para establecer los datos de appData, incluir planets, inputValue y handleInputChange.
4. Para acceder a inputValue y handleInputChange, utilizar el Context proporcionado como valor para el hook useContext.