display bootstrap navbar using react.js

Question

I have a very simple React.js project where I am trying to add a bootstrap navbar to the project, but I can't seem to figure out how to get the navbar to display on the page. The navbar example I am referencing can be found here, http://codepen.io/zhaozhiming/pen/LNGyvR

The project looks like the following,

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>My super cool title.</title>
</head>
<body>
  <div id="root"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="bundle.js" ></script>
</body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React, {PropTypes} from 'react';
import styles from './App.css';
import NavBarTest from './common/NavBar-test';

const App = () => {
  return (
    <div id="parent">
      <div>Hello, App!</div>
      <NavBarTest {...NavBarTest} />
    </div>
  )
}

export default App;

Navbar-test.js

import React 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}
  ]}
];

export default NavBar;

Finally, the page appears to render, but I am seeing the following error / warning message in the browser console. Any help on how I can get this navbar to display on the page would greatly be appreciated.

Looks like you use linkTo in a couple places. Make sure brand in NavBar is defined before trying to access properties on it. Make sure link is defined in NavMenu before accessing properties on it. — lux
– lux, Commented Mar 29, 2017 at 20:00

Mayank Shukla · Accepted Answer · 2017-03-30 03:45:08Z

3

According to the structure you showed, you should render NavBar in App component because you are default exporting NavBar from Navbar-test.js file. One more this in NavBar component you are accessing the values by this.props.brand so you need to define the var navbar data (data that you defined in the last of app.js file) in app.js file, Use this in app.js file, it will work:

import React, {PropTypes} from 'react';
import styles from './App.css';
import NavBar from './common/NavBar-test';

const App = () => {
  return (
    <div id="parent">
      <div>Hello, App!</div>
      <NavBar {...navbar}/>
    </div>
  )
}

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
                }
            ]
        }
];

Check the working code: http://codepen.io/zhaozhiming/pen/LNGyvR?editors=0010

edited Mar 30, 2017 at 3:45

answered Mar 29, 2017 at 20:01

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

2 Comments

ipatch Over a year ago

I tried the solution you provided, but I'm still getting the same error message.

Mayank Shukla Over a year ago

@Chris solution that i provided should work, check the codepen, i think you are doing some mistake, check again.

Adam · Accepted Answer · 2018-03-27 12:39:47Z

1

If this is for learning then do go ahead and create them all! Else I will suggest using react-bootstrap

https://react-bootstrap.github.io/components/navbar/

edited Mar 27, 2018 at 12:39

Adam

3,5384 gold badges35 silver badges54 bronze badges

answered Mar 29, 2017 at 20:03

aks

9,63112 gold badges54 silver badges81 bronze badges

Collectives™ on Stack Overflow

display bootstrap navbar using react.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related