CODEWITHSUNDEEP
javascriptreactjs
iChido
iChido

Reputation: 4604

React Component Array Map - Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

I am new to React. I'm putting together a component that will repeat list items based on an array for a set of navigation options. I am getting the error: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

This is my component:

import React from 'react';

const navOptions = [
  {name: 'Home'},
  {name: 'Me Mine and Ours'},
  {name: 'Collection'},
  {name: 'Yo!'}
];

const Nav = () => {
  navOptions.map((name, index) => {
    return (
      <li className="nav-item">
        <a className="nav-link" href="#" key="">j</a>
      </li>
    )
  })
};

export default Nav;

Upvotes: 1

Views: 1865

Answers (2)

bathpp
bathpp

Reputation: 470

You are missing the main return in this part

const Nav = () => { navOptions.map((name, index) => { return ( <li className="nav-item"> <a className="nav-link" href="#" key="">j</a> </li> ) }) };

Change to (I think you will need a <div> to wrap the <li>s up)

return (<div>{navOptions.map(....

Upvotes: 0

f-CJ
f-CJ

Reputation: 4481

You are missing a return. You have to return the result of navOptions.map as well.

import React from 'react';

const navOptions = [
  {name: 'Home'},
  {name: 'Me Mine and Ours'},
  {name: 'Collection'},
  {name: 'Yo!'}
];

const Nav = () => {
  return navOptions.map((name, index) => {
    return (
      <li className="nav-item">
        <a className="nav-link" href="#" key="">j</a>
      </li>
    )
  })
};

export default Nav;

Upvotes: 7

Related Questions