0
308
Vistashow to map() in JSX ? ERROR: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null
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>
);
}
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
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
·
Juan Pablo Isaza
Denunciar
0
I think the problem is that you have not return any component in your App(). try this:
function App() {
return contacts.map((item) => {
return <Card name={item.name} img={item.imgURL} phone={item.phone} email={item.email} />
}
)
}
·
Juan Pablo Isaza
Denunciar
0
Updated Code
App.jsx
import React from "react";
import { Card } from "./Card";
import { contacts } from "../contacts";
function App() {
const arrayMap = contacts.map((item) => {
return <Card
name={item.name}
img={item.imgURL}
phone={item.phone}
email={item.email}
/>
})
return (
//Load arrayMap here..
{ arrayMap }
);
}
export default App;
·
Juan Pablo Isaza
Denunciar
Responde la pregunta