How to place glyphicon in bootstrap navbar within a react.js project

Question

How can I display a glyphicon in a bootstrap navbar? I have a React.js project that I have been working on, and I would like to relocate the GitHub glyphicon to the navbar. So far I have something looking like the below.

The code pertaining to the navbar in the App.js

import React, {PropTypes} from 'react';
import NavBar from './common/NavBar-test';
import FontAwesome from 'react-fontawesome';

var navbar = {};
navbar.brand =  {linkTo: "#", text: "app"};
navbar.links = [

  {linkTo: "#Demonstration", text: "Demonstration"},
  {linkTo: "#Demonstration2", text: "Demonstration #2"},
  {linkTo: "https://github.com/user/app", text:"GitHub Source Code"},
  {linkTo: "https://itunes.apple.com/us/app/", text: "App Store"},
  {linkTo: "https://github.com/user/appr", text: "The Future of app"}
];

And Navbar-test.js

import React, { PropTypes } from 'react';

// create classes
var NavBar = React.createClass({
  render: function(){
    return(
      <nav className="navbar navbar-default navbar-static-top">
        <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 key={link.text} links={link.links} text={link.text} active={link.active} icon={link.icon} />
        );
      }
      else {
        return (
          <NavLink key={link.text} 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 key={link.text} 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}{this.props.icon}</a>  
      </li>
    );
  }
});

export default NavBar;

Ideally, I'd like to place the GitHub glyphicon in front of the text that states GitHub Source Code .

Answer 1

It looks like you are mapping over the links (which is cool), but you can add your desired GitHub data before the mapped links.

You might end up with something like this:

<span>
    <NavLink>GitHub Source Code</NavLink>
    <GlyphIcon />
</span>
// Then map over links here

Answer 2

In short, I finally got the glyphicons to display how I would like them to.

I needed to modify the source of the Navbar-test to support icons.

Something like,

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