React
Las piezas que se repiten
1
Componiza la lista
Convierte una UI repetitiva en un componente reutilizable con props
Crea un componente ClienteCard que reciba nombre y plan como props. Después úsalo tres veces en ListaDeClientes con los datos de Ana García (Pro), Luis Pérez (Básico) y Marta Ruiz (Pro).
function ListaDeClientes() {
return (
<div>
<div className="card">
<h2>Ana García</h2>
<p>Plan: Pro</p>
</div>
<div className="card">
<h2>Luis Pérez</h2>
<p>Plan: Básico</p>
</div>
<div className="card">
<h2>Marta Ruiz</h2>
<p>Plan: Pro</p>
</div>
</div>
);
}Esta lista tiene tres tarjetas casi idénticas. Lo que cambia entre ellas son los datos. Es el caso perfecto para crear un componente reutilizable.
2
Clasifica: ¿props o state?
Decide si cada dato debería vivir en props o en state del componente
El componente
FormularioFactura
Un formulario donde el usuario rellena los datos de una factura nueva. Clasifica cada uno de estos datos en props o state según dónde deberían vivir.
clienteId
ID del cliente al que va la factura (viene del menú anterior)
textoFactura
El contenido que el usuario está escribiendo ahora mismo en el campo
totalCalculado
La suma actual del importe mientras el usuario escribe
tiposDeIVAPermitidos
Lista de tipos de IVA que define la empresa (21%, 10%, 4%)
modoEdicion
Si el formulario está abierto en modo edición o solo lectura
nombreEmpresa
Nombre de la empresa del usuario que está logueado
Props
Datos que llegan de fuera del componente
State
Datos que viven dentro del componente y cambian con el tiempo
3
Arregla el componente roto
Este componente tiene dos bugs típicos de React. Encuéntralos y corrígelos.
Este código tiene dos bugs clásicos de React. Uno rompe la app nada más cargar, el otro lanza un warning en la consola cada vez que se renderiza. Encuentra los dos y arréglalos.
Uno tiene que ver con cuándo se ejecuta una función en un onClick. El otro tiene que ver con cómo React identifica elementos en una lista.
Comprobaciones
El onClick del botón no ejecuta setLikes en el render
El botón sigue incrementando el contador cuando se pulsa
Los ContadorLikes dentro del map tienen atributo key
Recursos
Documentación y material de apoyo para este reto
Estado del reto