Cómo recorrer arrays en React (La forma correcta)

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