[x] Como sugerencia general, comprueba continuamente tu aplicación en Chrome y el terminal dónde arrancas la app con npm start. Si algo falla, hay que arreglarlo antes de continuar.
[x] Hace falta una variable estado para cada input que usamos en el formulario de una nueva adalaber.
[x] Haz que los input del formulario sean "componentes controlados": deben tener una función handler en su evento onChange y una variable de estado en su atributo value.
[x] Usa un <form> para cada grupo de <input>, incluidos los filtros
[x] Resetea el estado de tu formulario cuando agregues una adalaber
[x] Comprueba que los inputs tengan algún valor cuando vas a añadir una nueva adalaber.
[x] Revisa los metadatos en index.html (lang, title...)
[x] Elimina el código comentado, debuggers y consoles
Algunas pistas para hacer los bonus
Ten los componentes <input>/>select> controlados añadiendo la variable estado en el value
Implementa un fetch dentro de una función useEffect para obtener los datos del API.
En el then() del fetch debes usar la función del useState para guardar el array de datos en tu variable de estado.
Ten en cuenta que la respuesta del servidor no es directamente un array, sino un objeto con las propiedades info y results (es ésta segunda la que contiene el array de datos).
Recuerda: a medida que vayas realizando estas mejoras debes subirlas a la rama principal de este repo y marcarlas como realizadas en este issue. Si no, tu profe no sabrás que has realizado estas mejoras.
Buen trabajo @Rpg87 !
Algunas pistas para acabarlo:
npm start
. Si algo falla, hay que arreglarlo antes de continuar.input
que usamos en el formulario de una nueva adalaber.input
del formulario sean "componentes controlados": deben tener una función handler en su eventoonChange
y una variable de estado en su atributovalue
.<form>
para cada grupo de<input>
, incluidos los filtrosinputs
tengan algún valor cuando vas a añadir una nueva adalaber.index.html
(lang
,title
...)Algunas pistas para hacer los bonus
<input>
/>select>
controlados añadiendo la variable estado en elvalue
fetch
dentro de una funciónuseEffect
para obtener los datos del API.then()
delfetch
debes usar la función deluseState
para guardar el array de datos en tu variable de estado.info
yresults
(es ésta segunda la que contiene el array de datos).Si tienes cualquier duda, avisa!
Al turrón!!!