Console.log muestra objetos que creo que se pueden mostrar con mapa (). Sin embargo, hay un error "No se devolvió nada del procesamiento. Esto generalmente significa que falta una declaración de devolución. O, para no procesar nada, devuelva nulo".

¿Dónde está el problema y cómo puedo mapear() objetos? ¡Gracias! Exporto contactos.js en App.jsx:

 export const contacts = [ { name: "Beyonce", imgURL: "https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg", phone: "+123 456 789", email: "b@beyonce.com" }, { name: "Jack Bauer", imgURL: "https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg", phone: "+987 654 321", email: "jack@nowhere.com" }, { name: "Chuck Norris", imgURL: "https://i.pinimg.com/originals/e3/94/47/e39447de921955826b1e498ccf9a39af.png", phone: "+918 372 574", email: "gmail@chucknorris.com" } ];

App.jsx parece:

 import React from "react"; import { Card } from "./Card"; import { contacts } from "../contacts"; function App() { contacts.map((item) => { return <Card name={item.name} img={item.imgURL} phone={item.phone} email={item.email} /> } ) } export default App;

Y componente de tarjeta:

 import React from "react"; export const Card = (props) => { return ( <div> <h1 className="heading">My Contacts</h1> <div className="card"> <div className="top"> <h2 className="name">{props.name}</h2> <img className="circle-img" src={props.img} alt="avatar_img" /> </div> <div className="bottom"> <p className="info">{props.phone}</p> <p className="info">{props.email}</p> </div> </div> </div> ); }