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, nam