Props y State

Los datos dentro de un componente

Reconoce

Pregunta 1 de 5

function Saludo({ nombre }) {
  return <p>Hola, {nombre}</p>;
}

¿Qué es 'nombre' en este componente?

1
Arregla el contador
El botón + no funciona. Encuentra la línea rota y aplica el fix.
Pendiente

Haz click en la línea con el error. Después elige el fix correcto. El componente en vivo se actualizará.

Counter.tsx
1function Counter() {
2 const [count, setCount] = useState(0);
3
4 const increment = () => {
5 count++; // ← ¿Cuál es el problema?
6 };
7
8 return (
9 <div>
10 <span>{count}</span>
11 <button onClick={() => setCount(count - 1)}>-</button>
12 <button onClick={increment}>+</button>
13 </div>
14 );
15}
Preview en vivo0
El botón + no funciona
2
Conecta las props
Arrastra las props correctas al componente para que funcione.
Pendiente

Arrastra (o pulsa) cada prop al slot correcto en el JSX. El componente se llenará con datos en vivo.

App.tsx
// App.tsx
const user = { name: "Isaac", plan: "Pro" };
return (
<UserCard
Arrastra name aquí
Arrastra plan aquí
/>
);
UserCard preview
?
—
—
name={user.name}
plan={user.plan}
avatar={user.avatar}
3
Debug del state
Una lista de todos no se actualiza. Encuentra el bug y arréglalo.
Pendiente

Escribe un todo y pulsa "Añadir". El todo no aparece en la lista. Usa la consola para diagnosticar el problema.

App en vivo
Comprar leche
Llamar al dentista
Console
Pulsa "Abrir consola" para ver los logs...
Recursos
Documentación y material de apoyo para este reto
Pasar props
React Docs oficial
State y ciclo de vida
Gestión del estado
Estado del reto