I'm feeling a little stuck here. I'm currently working with React Bootstrap and the Navigation component.
One of the routes in my application is the dashboard, which is only accessible after logging in.
When a user navigates to the dashboard, I have managed to achieve the following: https://i.sstatic.net/oH0ld.jpg
However, I would like to accomplish something more like this: https://i.sstatic.net/VnnQl.jpg
My goal is for the user to click on "BOM X-ray" and have it render small components Children 1, 2, and 3.
Here is the code that renders the 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 plan is to create a component like this:
import Bom from './bomxray/Indexbom';
The Bom component will contain the Children inside, which will handle CRUD Ajax requests to a server.
I've tried things like this (FAIL):
<NavItem eventKey={1} <Bom />>Bom X-Ray</NavItem>
And this (it renders, but everything is messed up):
<NavItem eventKey={1} >Bom X-Ray</NavItem> <Bom />
If I'm on the right track, any ideas on how to proceed would be appreciated. If I'm completely off track, please point me in the right direction :)
EDIT (Added possible solution): It just occurred to me, I do have:
handleSelect(event, selectedKey) {
alert('selected ' + selectedKey);
}
Could I dynamically render the component based on what was clicked in the handleSelect function?