3 October 2016

Creating Menu in ReactJS using Bootstrap

Hi Friends,

Extending my previous post to enable the application to show the dropdown on your page. To show the dropdown on our page we are going to use the bootstrap library of ReactJS.

To use the bootstrap feature given by ReactJS, we need to install the library related to this.  To install it we need to run the following command in command prompt window:

npm install react-bootstrap --save

Then you have to import this library in your code as follows:

import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';


Once it is imported you can add the dropdown in your component class as shown below:

<div><Nav bsStyle="tabs" activeKey={this.state.activePage} onSelect={this.handleSelect}>
            <NavItem eventKey={1} >Tab1</NavItem>
            <NavItem eventKey={2}>Tab2</NavItem>
            <NavItem eventKey={3}>Tab3</NavItem>
            <NavDropdown eventKey={4} title="Actions" id="nav-dropdown">
                <MenuItem eventKey="4.1">Submit</MenuItem>
                <MenuItem eventKey="4.2">Add Another</MenuItem>
                <MenuItem eventKey="4.3">Delete This</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey="4.4">Go To Other Page</MenuItem>
            </NavDropdown>
        </Nav>
        <div><p>Tab selected {this.state.activePage} </p></div>
        </div>



So the complete jsx code will look like as follows:

import React from "react";
import ReactDOM from "react-dom";
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';

var TabApp = React.createClass({
 getInitialState: function() {
    return {
    activePage: 1
    };
  },
 handleSelect(eventKey) {
     var activePageNum=this.state.activePage;
    console.log("Active page ====>"+activePageNum);
    console.log("Event Kay ====>"+eventKey);
        this.setState({
            activePage: eventKey
        });
    },
componentDidMount: function() {
  this.setState({activeKey: 1});
  },
   render: function(){

        return ( <div><Nav bsStyle="tabs" activeKey={this.state.activePage} onSelect={this.handleSelect}>
            <NavItem eventKey={1} >Tab1</NavItem>
            <NavItem eventKey={2}>Tab2</NavItem>
            <NavItem eventKey={3}>Tab3</NavItem>
            <NavDropdown eventKey={4} title="Actions" id="nav-dropdown">
                <MenuItem eventKey="4.1">Submit</MenuItem>
                <MenuItem eventKey="4.2">Add Another</MenuItem>
                <MenuItem eventKey="4.3">Delete This</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey="4.4">Go To Other Page</MenuItem>
            </NavDropdown>
        </Nav>
        <div><p>Tab selected {this.state.activePage} </p></div>
        </div>
        );
     }

 });

ReactDOM.render(
 <TabApp/>,
     document.querySelector("#container")
);


Your HTML code will be as follows:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div id="container"></div>
  <script src="output/myCode.js"></script>
</body>
</html> 


Once you run your page you can see the following screen:

 Thanks and Happy Coding :)

0 on: "Creating Menu in ReactJS using Bootstrap"