How to make a twitter bootstrap navbar in a React.js project

Question

I would like to make a twitter bootstrap navbar in my React.js project, but I'm presently getting the following error, TypeError: this.props.brand is undefined

I found this codepen last night, where the author creates a navbar and I implemented the following code, but I am still getting the above mentioned error.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>chrisrjones.com</title>

</head>
<body>
  <div id="app"></div>
  <div id="hello"></div>
  <div id="navbar"></div>

  <script src="/bundle.js" ></script>
</body>
</html>

main.js

import React from 'react';
import ReactDOM from 'react-dom';

var Hello = require('./components/hello');
var NavBar = require('./components/navbar');

ReactDOM.render(
  <Hello/>,
  document.getElementById('hello')
);

ReactDOM.render(
  <NavBar/>,
  document.getElementById('navbar')
);

navbar.js

var React = require('react');
// import React, { PropTypes } from 'react';

// create classes
var NavBar = React.createClass({
  render: function(){
    return(
      <nav className="navbar navbar-inverse">
        <div className="container-fluid">
          <div className="navbar-header">
            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
              <span className="sr-only">Toggle navigation</span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
            </button>
            <NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} />
          </div>
          <div className="collapse navbar-collapse" id="navbar-collapse">
            <NavMenu links={this.props.links} />
          </div>
        </div>
      </nav>
    );
  }
});

var NavBrand = React.createClass({
  render: function(){
    return (
      <a className="navbar-brand" href={this.props.linkTo}>{this.props.text}</a>
    );
  }
});

var NavMenu = React.createClass({
  render: function(){
    var links = this.props.links.map(function(link){
      if(link.dropdown) {
        return (
          <NavLinkDropdown links={link.links} text={link.text} active={link.active} />
        );
      }
      else {
        return (
          <NavLink linkTo={link.linkTo} text={link.text} active={link.active} />
        );
      }
    });
    return (
      <ul className="nav navbar-nav">
        {links}
      </ul>
    );
  }
});

var NavLinkDropdown = React.createClass({
  render: function(){
    var active = false;
    var links = this.props.links.map(function(link){
      if(link.active){
        active = true;
      }
      return (
        <NavLink linkTo={link.linkTo} text={link.text} active={link.active} />
      );
    });
    return (
      <li className={"dropdown " + (active ? "active" : "")}>
        <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          {this.props.text}
          <span className="caret"></span>
        </a>
        <ul className="dropdown-menu">
          {links}
        </ul>
      </li>
    );
  }
});

var NavLink = React.createClass({
  render: function(){
    return(
      <li className={(this.props.active ? "active" : "")}><a href={this.props.linkTo}>{this.props.text}</a></li>
    );
  }
});

// set data
var navbar = {};
navbar.brand =
  {linkTo: "#", text: "React Bootstrap Navbar"};
navbar.links = [
  {linkTo: "#", text: "Link 1"},
  {linkTo: "#", text: "Link 2"},
  {dropdown: true, text: "Dropdown", links: [
    {linkTo: "#", text: "Dropdown Link 1"},
    {linkTo: "#", text: "Dropdown Link 2", active: true}
  ]}
];

// render NavBar
// React.render(
//   <NavBar {...navbar} />,
//   document.getElementById("navbar")
// );

module.exports = NavBar

;

Mayank Shukla · Accepted Answer · 2017-02-03 17:59:30Z

1

Issue is, you are using this.props in all component but u are not passing the props values, in the code pen example you missed this part:

var navbar = {};
navbar.brand = {linkTo: "#", text: "React Bootstrap Navbar"};
navbar.links = [
    {linkTo: "#", text: "Link 1"},
    {linkTo: "#", text: "Link 2"},
    {   dropdown: true, text: "Dropdown", links: [
            {linkTo: "#", text: "Dropdown Link 1"},
            {linkTo: "#", text: "Dropdown Link 2", active: true}
        ]
    }
];

Use this code for Main.js:

import React from 'react';
import ReactDOM from 'react-dom';

var Hello = require('./components/hello');
var NavBar = require('./components/navbar');

var navbar = {};
navbar.brand = {linkTo: "#", text: "React Bootstrap Navbar"};
navbar.links = [
    {linkTo: "#", text: "Link 1"},
    {linkTo: "#", text: "Link 2"},
    {   dropdown: true, text: "Dropdown", links: [
            {linkTo: "#", text: "Dropdown Link 1"},
            {linkTo: "#", text: "Dropdown Link 2", active: true}
        ]
    }
];

ReactDOM.render(
  <Hello/>,
  document.getElementById('hello')
);

ReactDOM.render(
    <NavBar {...navbar} />,
    document.getElementById("navbar")
);

They are passing this object in the props. Make the changes in your code it will work.

Let me know if you need any help.

edited Feb 3, 2017 at 17:59

answered Feb 3, 2017 at 17:42

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

4 Comments

ipatch Over a year ago

I have the first block of code you mention in my example navbar.js

Mayank Shukla Over a year ago

yes you have that part, but u are not passing that in props, like codepen example is doing, i think u r new to react, props are the values that r passed from outside, like by parent to child, in routes... so you need to pass this object in NavBar.

Mayank Shukla Over a year ago

check the NavBar comp its using this.props.brand but it is not getting any props so throwing the mentioned error. Put the data in Main.js and pass the values in props, it will work :)

ipatch Over a year ago

By data I assume you mean the code example you posted above? Also where in the Main.js would I put those blocks of code? And yes you are correct, I am new to React.

Collectives™ on Stack Overflow

How to make a twitter bootstrap navbar in a React.js project

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related