React 19
Ejercicios de React sobre Listas
4 ejercicios de Listas en React. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.
1 · Elige la respuesta · nivel 1
¿Para qué sirve la prop key al renderizar una lista?
- APara que React identifique cada elemento entre renders
- BPara ordenar la lista
- CPara aplicar estilos a cada elemento
- DEs obligatoria para que compile
Ver la respuesta
Respuesta: A. Para que React identifique cada elemento entre renders
key permite saber qué elemento es cuál cuando la lista cambia, para conservar su estado y su DOM. No afecta al orden y sin ella la app funciona, pero con avisos y fallos sutiles.
2 · Encuentra el fallo · nivel 1
La lista sale vacía aunque items tiene elementos. ¿Qué línea tiene el fallo?
1function List({ items }) {2 return (3 <ul>4 {items.map((item) => {5 <li key={item.id}>{item.name}</li>;6 })}7 </ul>8 );9}Ver la respuesta
El fallo está en la línea 5:
<li key={item.id}>{item.name}</li>;La función flecha tiene llaves, así que el JSX de la línea 5 se crea y se descarta: falta return. También vale cambiar las llaves por paréntesis, (item) => (<li ...>).
3 · Completa el hueco · nivel 1
Completa para renderizar una lista de tareas.
<ul> {todos.___((todo) => ( <li ___={todo.id}>{todo.text}</li> ))}</ul>- map
- key
- forEach
- id
- filter
- ref
Ver la respuesta
Respuesta: map · key
<ul> {todos.map((todo) => ( <li key={todo.id}>{todo.text}</li> ))}</ul>map devuelve un array de elementos que React puede pintar; forEach devuelve undefined. Cada elemento necesita una key estable, como el id.
4 · Encuentra el fallo · nivel 2
Al borrar la primera tarea, la casilla marcada salta a la tarea siguiente. ¿Qué línea tiene el fallo?
1function TodoList({ todos }) {2 return (3 <ul>4 {todos.map((todo, index) => (5 <li key={index}>6 <input type="checkbox" /> {todo.text}7 </li>8 ))}9 </ul>10 );11}Ver la respuesta
El fallo está en la línea 5:
<li key={index}>Con el índice como key, al borrar la primera tarea la segunda pasa a tener key 0 y React le da el estado de la casilla que había en esa posición. La key tiene que identificar el dato: key={todo.id}.