Si estás aprendiendo React, en algún punto te vas a hacer esta pregunta:
“¿Cómo recorro arrays correctamente?”
Y sí… puedes usar un for, pero esa no es la forma en la que React está pensado para trabajar.
Vamos a explicarlo simple.
🧠 La forma en React: map()
En React, la manera correcta de renderizar listas es usando el método .map() de JavaScript.
¿Por qué?
Porque React es declarativo — tú describes cómo debe verse la UI a partir de los datos.
Ejemplo:
const users = ["Adam", "Sophia", "Lucas"];
function App() {
return (
<div>
{users.map((user, index) => (
<p key={index}>{user}</p>
))}
</div>
);
}
👉 Esto toma cada elemento del array y lo convierte en UI.
⚠️ El problema de las key (que muchos ignoran)
React necesita una forma de identificar cada elemento en la lista.
Become a Medium member
Ahí es donde entra la key.
❌ Mal:
{users.map((user, index) => (
<p key={index}>{user}</p>
))}
✅ Mejor:
const users = [
{ id: 1, name: "Adam" },
{ id: 2, name: "Sophia" },
];
{users.map((user) => (
<p key={user.id}>{user.name}</p>
))}
👉 Siempre usa un valor único y estable.
🚫 Por qué NO usar for o forEach
Puede que pienses:
“¿Por qué no recorrer como siempre?”
Porque:
forEach() no retorna nada → React no puede renderizarlo ()
Los for rompen el patrón declarativo
Terminas escribiendo más código para peores resultados
🔁 Ejemplo real
Imagina que haces una petición a una API:
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("/api/users")
.then(res => res.json())
.then(data => setUsers(data));
}, []);
Renderizando:
return (
<div>
{users.map(user => (
<div key={user.id}>
<h3>{user.name}</h3>
<p>{user.email}</p>
</div>
))}
</div>
);
💥 Errores comunes
Olvidar la key
Usar index cuando la lista puede cambiar
Intentar usar forEach
Mutar el array antes de renderizar
⚡ Patrón limpio (Pro tip)
Extrae componentes:
function UserCard({ user }) {
return (
<div>
<h3>{user.name}</h3>
<p>{user.email}</p>
</div>
);
}
{users.map(user => (
<UserCard key={user.id} user={user} />
))}
👉 Más limpio, reutilizable y escalable.
🚀 Conclusión
Si te quedas con una sola idea:
React no “recorre” — transforma datos en UI.
Dominar .map() es uno de los primeros pasos para pensar como un desarrollador en React.
👋 Sígueme para más
Comparto tips simples, snippets y buenas prácticas de programación.
Sígueme como @adams.nxt
Puedes encontar mas ejemplos de codigo en mi GitHub:
https://github.com/adamsnxt
Top comments (0)