Rendering a Component Instance in React

Question

I am trying to render an instance of a Component Class from another Component Class in React. But for some reason, the browser complains that the component instance is not defined. I have it all in the same JS file (JS window in Codepen). Here's my code -

var NavBar = React.createClass({
  render: function() {
    var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
    var navLinks = pages.map((page) => {
      <a href="{'/' + page}">{page}</a>
    });

    return <nav>{navLinks}</nav>;
  }
});

var Page = React.createClass({
  render: function() {
    return (
        <div>
          <h1 className="text-primary">Welcome!</h1>
          <NavBar />
          <h2 className="text-primary">About Me</h2>
        </div>
      );
  }
});

ReactDOM.render(<Page />, document.getElementById('app'));

Here's the app on Codepen . This is the error I get -

pen.js:13 Uncaught ReferenceError: NavBar is not defined

I'm not quite sure what's going on. NavBar should be available in the scope of Page , as far as I understand.

Thanks!

Answer 1

Looks like you mixed the function return approach and the fat arrow approach to return the map

when you use {} after the => it means that whatever you are writing inside it is the body of the function. In that case you need to write a return statement like

var NavBar = React.createClass({
  render: function() {
    var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
    var navLinks = pages.map((page) => {
      return <a href="{'/' + page}">{page}</a>
    });

    return <nav>{navLinks}</nav>;
  }
});

The other way is to skip the function body and directly return the statement. It works well because the map function only contains the return statement and if we skip the brackets and put the content in the parentesis then JSX will internally convet it into the function body with a return statement. It is much liuke the lambda functions being introduced in Java8

You can use it like

var NavBar = React.createClass({
  render: function() {
    var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
    var navLinks = pages.map((page) => (<a href="{'/' + page}">{page}</a>));

    return <nav>{navLinks}</nav>;
  }
});

I suppose am I able to explain it properly

Answer 2

var navLinks = pages.map((page) => <a href={'/' + page}>{page}</a>);

No curly braces, no return statement. I like eslint :)

Pen: http://codepen.io/free-soul/pen/dOdNby

---

Note that I also removed the surrounding double-quotes on the value passed to href .

Previously it was this: <a href="{'/' + page}">{page}</a>

for all values of page, the link url becomes : www.example.com/{'/' + page}

but I think you wanted it like this: www.example.com/contact . So no double-quotes.

Answer 3

You have missed the return statement in the callback to map function. map function should always return a modified element of array.

Replace

<a href="{'/' + page}">{page}</a>

with

return (<a href="{'/' + page}">{page}</a>)