how to map() in JSX ? ERROR: Nothing was returned …

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>
    );
}

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

how to map() in JSX ? ERROR: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

Advertisement

Answer