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

Source: Dev.to

🧠 La forma en React: map()

¿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"];

👉 Esto toma cada elemento del array y lo convierte en UI.

⚠️ El problema de las key (que muchos ignoran)

❌ Mal

{users.map((user, index) => (
  {user}
))}

✅ Mejor

const users = [
  { id: 1, name: "Adam" },
  { id: 2, name: "Sophia" },
  { id: 3, name: "Lucas" }
];

{users.map(user => (
  {user.name}
))}

👉 Siempre usa un valor único y estable como key.

🚫 Por qué NO usar for o forEach

“¿Por qué no recorrer como siempre?”

• forEach() no retorna nada → React no puede renderizarlo.
• Un bucle tradicional tampoco encaja bien con el modelo declarativo de React.

const [users, setUsers] = useState([]);

Renderizando

return (
  {users.map(user => (
    - {user.name}
  ))}
);

💥 Errores comunes

function UserCard({ user }) {
  return {user.name};
}

👉 Usa componentes limpios, reutilizables y escalables.

🚀 Conclusión

React no “recorre” — transforma datos en UI. Dominar .map() es uno de los primeros pasos para pensar como un desarrollador en React.