React.js - Bootstrap render component in Nav

Question

I am a bit stuck here. I am using React bootstrap, Navigation component

I have a route called dashboard. That route is protected, available only via login.

When the user navigates to Dahsboard, this is what I have accomplished:

I would like to achieve something like this:

So when user clicks BOM X-ray it renders small components Children 1,2 and 3.

This is the code that renders first image:

import React from 'react'
import Bom from './bomxray/Indexbom';

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';

class Dashboard extends React.Component {
   handleSelect(event, selectedKey) {
       //event.preventDefault();
       alert('selected ' + selectedKey);
   }
render() {
    return (
        <Nav bsStyle="tabs" activeKey={1} onSelect={this.handleSelect}>
            <NavItem eventKey={1} >Bom X-Ray</NavItem>
            <NavItem eventKey={2} title="Item">Calculation</NavItem>
            <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
            <NavDropdown eventKey={4} title="Dropdown" id="nav-dropdown">
                <MenuItem eventKey="4.1">Action</MenuItem>
                <MenuItem eventKey="4.2">Another action</MenuItem>
                <MenuItem eventKey="4.3">Something else here</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey="4.4">Separated link</MenuItem>
            </NavDropdown>
        </Nav>
    );
 }
export default Dashboard

My idea is to create component:

import Bom from './bomxray/Indexbom';

And Bom component will have the Children inside. Those children will be CRUD Ajax to a server.

I tried things like this (FAIL):

 <NavItem eventKey={1} <Bom />>Bom X-Ray</NavItem>

And this (renders it, but all is messed up):

<NavItem eventKey={1} >Bom X-Ray</NavItem> <Bom />

If I am on the right track, please some idea how to proceed. If I am on totally wrong track, please point me to right direction :)

EDIT (Added possible solution). Just occured to me, I do have:

handleSelect(event, selectedKey) {       
    alert('selected ' + selectedKey);
}

Could I somehow dynamicaly render the component? In the handeSelect I catch what ws clicked and based on that render component?

To me it seems like rendering a bunch of components inside the nav could cause a formatting nightmare. Is it possible for you to render the bom components in a separate div outside the nav? — Mark
– Mark, Commented Mar 8, 2016 at 16:22

Mark · Accepted Answer · 2017-03-17 22:48:06Z

2

I would suggest you render the <Bom/> component outside of the <Nav>, as below, to preserve the formatting of your Nav. You can control which of the components is showing through the handleSelect function by setting an activeKey in state.

 class Dashboard extends React.Component {
    getInitialState(){
        return({activeKey: 1})
    }
    handleSelect(selectedKey, event) {
        //event.preventDefault();
        alert('selected ' + selectedKey);
        this.setState({activeKey: selectedKey});
    }
    render() {
        return (
            <div>
                <Nav bsStyle="tabs" activeKey={this.state.activeKey} onSelect={this.handleSelect}>
                    <NavItem eventKey={1} >Bom X-Ray</NavItem>
                    <NavItem eventKey={2} title="Item">Calculation</NavItem>
                    <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
                    <NavDropdown eventKey={4} title="Dropdown" id="nav-dropdown">
                        <MenuItem eventKey="4.1">Action</MenuItem>
                        <MenuItem eventKey="4.2">Another action</MenuItem>
                        <MenuItem eventKey="4.3">Something else here</MenuItem>
                        <MenuItem divider />
                        <MenuItem eventKey="4.4">Separated link</MenuItem>
                    </NavDropdown>
                </Nav>

                {this.state.activeKey == 1 ? <Bom/> : null}
                {this.state.activeKey == 2 ? <CalculationComponent/> :null}
            </div>

        );
     }
 }

edited Mar 17, 2017 at 22:48

answered Mar 8, 2016 at 16:33

Mark

3,1631 gold badge20 silver badges24 bronze badges

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

5 Comments

Amiga500 Over a year ago

Thank you for the suggestion. I am going to have more components. Second Nav item is Calculation, which is similar lik Bom component. How would I go about rendering it as well?

Mark Over a year ago

I've made edits to make the code example more complete. Let me know if it addresses your question.

Amiga500 Over a year ago

I will test it. On a side note, I just had an idea how to do it, and I made edit in my question. thing is I did not know how to do it... But you answered it :)

Amiga500 Over a year ago

Thank you for the solution. I hade to change declaration from class Dashboard extends React.Component { to const Dashboard = React.createClass ({ Does it make any difference whatsoever?

WBC Over a year ago

I think your handleSelect arguments are reversed, it should be (selectedKey, event): react-bootstrap.github.io/components.html#navs-props

Collectives™ on Stack Overflow

React.js - Bootstrap render component in Nav

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related