ReactJS map through an array with objects

Question

I have that part of code

const links = [
  {
    name: 'How it works',
    ref: '/'
  },
  {
    name: 'Calendar',
    ref: 'calendar'
  },
  {
    name: 'Contact me',
    ref: 'contact'
  }
];

const renderLinks = links.map((link, index) =>
  <li className="nav-item active" key={index}>
    <a className="nav-link" href={link.ref || "#"}>
      {link.name}
    </a>
  </li>
);

However when I try to render it an error is thrown.

render() {
    return (
      {renderLinks}
    );
  }

Objects are not valid as a React child (found: object with keys {renderLinks}). If you meant to render a collection of children, use an array instead.

As I think, I have to got an array but React thinks there is an object.

@dfsq wow... Thanks a lot. Solved my problem. Feel free to post an answer I'll check it. — Sergey
– Sergey, Commented Apr 13, 2018 at 20:01

dfsq · Accepted Answer · 2018-04-13 20:01:05Z

2

React thinks this is an object because you indeed provided an object. This is what it is if you write it without shortcut property notation:

render() {
  return {
    renderLinks: renderLinks
  );
}

Just return renderLinks directly without { }:

render() {    
  return renderLinks;
}

answered Apr 13, 2018 at 20:01

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS map through an array with objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related