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

Question

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;

If you open your developer console, react now has a warning that often alerts you to these sorts of typo errors. Source: I make this mistake regularly :) — imjared

f-CJ f-CJ · Accepted Answer · 2018-08-21T16:48:09

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;

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

2 Answers