React

Las piezas que se repiten

Reconoce

Pregunta 1 de 5

function BotonComprar() {
  return <button>Comprar</button>;
}

¿Qué es BotonComprar?

1
Componiza la lista
Convierte una UI repetitiva en un componente reutilizable con props
Pendiente
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>
  );
}
2
Conecta el flujo de datos
Asigna cada dato del componente App al hijo que lo necesita.
Pendiente

App tiene 4 datos/funciones. Conecta cada uno al componente hijo que lo necesita como prop.

App (padre)
├──├──└──
HeaderProductListCartBadge
userName→
items[]→
onLogout()→
cartCount→
3
Debug en vivo
El componente tiene un bug. Encuéntralo y arréglalo.
Pendiente
  • Comprar pan

⚠ Bug: al pulsar "Añadir" no se añade nada a la lista

⚠ Console warning:
Do not mutate state directly. Use setState().
at TodoList (TodoList.tsx:6)
1
function TodoList() {
2
  const [todos, setTodos] = useState(["Comprar pan"]);
3
  const [input, setInput] = useState("");
4
5
  const addTodo = () => {
6
    todos.push(input);     // ← línea 6
7
    setInput("");           // ← línea 7
8
  };
9
10
  return (
11
    <div>
12
      <input value={input} onChange={e => setInput(e.target.value)} />
13
      <button onClick={addTodo}>Añadir</button>
14
      <ul>
15
        {todos.map((t, i) => <li key={i}>{t}</li>)}
16
      </ul>
17
    </div>
18
  );
19
}
Recursos
Documentación y material de apoyo para este reto
Documentación oficial
React Docs oficial
Cheatsheet visual
API Reference
Estado del reto