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!

For me it works well - codepen.io/anon/pen/GNQNYp?editors=1010, only one note inside .map add return statement or use pages.map((page) => (<a href="{'/' + page}">{page}</a>));. Also don't forget add key for element inside loop — Oleksandr T.
– Oleksandr T., Commented Dec 3, 2016 at 7:14
I see. I think I got confused with the concept of implicit return in ES6 fat arrow. I'm also not sure why the lack of return creates a problem here, when it seems to work here - var multiply = (x, y) => x*y; Thanks for the help! — Dust_In_The_Wind
– Dust_In_The_Wind, Commented Dec 3, 2016 at 7:27

Shubham Khatri · Accepted Answer · 2016-12-03 07:38:29Z

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

answered Dec 3, 2016 at 7:38

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

Dust_In_The_Wind Over a year ago

Yes, I understood it now! Thank You!

yadhu · Accepted Answer · 2016-12-03 08:01:42Z

1

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.

answered Dec 3, 2016 at 8:01

yadhu

15.6k7 gold badges34 silver badges49 bronze badges

1 Comment

Dust_In_The_Wind Over a year ago

Thanks for the tips!

Shriharsha KL · Accepted Answer · 2016-12-03 07:20:35Z

0

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

answered Dec 3, 2016 at 7:20

Shriharsha KL

3271 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

Rendering a Component Instance in React

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related