React > Sesión 02: React State y Eventos
- Distinguir los eventos en React
- Manipular el State de un componente mediante el hook useState
- Emplear el State con el input de un usuario
En la sesión anterior creamos nuestra aplicación de gastos y agregamos una lista de elementos, sin embargo, esta lista no es dinámica. En esta sesión agregaremos nuevos elementos a nuestra lista de gastos y nos apoyaremos de eventos para esto. Los componentes de React manejan eventos de una manera muy similar a como lo hacemos con nodos del DOM cuando usamos JavaScript.
Para ver este tema vamos a empezar creando una nueva carpeta dentro de components y la vamos a llamar NewExpense, en esta carpeta irán todos los componentes necesarios para crear un formulario que nos permita agregar nuevos gastos. Vamos a crear dos componentes en esta carpeta, NewExpense y ExpenseForm junto con sus respectivos archivos CSS.
Ya vimos cómo usar los props para pasar información entre componentes y hacerlos dinámicos. El state es similar a los props en el sentido que contienen la información que el componente necesita, pero difiere de los props porque el state es privado y el componente es el que tiene el control. Cada componente es independiente y tiene su propio state.
Como estamos trabajando con componentes funcionales usaremos el hook useState, recuerda que inicialmente el state era exclusivo de las clases. Los hooks son funciones especiales que permiten a los componentes usar características de las clases como el state.
Nuestro componente ExpenseForm ya cuenta con state y es capaz de actualizarlo con la información que proporcione el usuario. Ahora necesitamos que esa información llegue varios niveles arriba hasta el componente App que es donde tenemos la lista expenses. ¿Cómo hacemos esto si antes dijimos que la información fluye de componentes padres a hijos? De la misma forma, usando props. Así como pasamos strings, arreglos u objetos a través de los props, también podemos pasar referencias a funciones. Veamos cómo hacerlo un nivel a la vez.
El renderizado condicional se referie a mostrar cierto contenido u otro dependiendo de si una condición se cumple o no. En nuestra aplicación por ejemplo, un buen uso sería en la lista de gastos, si tenemos gastos se renderizan pero si no tenemos gastos podemos mostrar un mensaje alternativo.