Console.log shows objects that I think can be displayed with map (). However, there is an error “Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.”
Where is the problem and how can I map() objects? Thanks! I export contacts.js in 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 look like:
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;
And Card component:
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> ); }
Advertisement
Answer
Add a return
statement in the App
component:
function App() { return contacts.map((item) => { return <Card name={item.name} img={item.imgURL} phone={item.phone} email={item.email} /> } ) }
Notice the return
before contacts.map