reactjs - How to render Multiple NavBar in react -


i new react. trying render multiple navbar in page 1 beneath other. navbar code looks following

import react, { component, proptypes } 'react'; import { navbar, nav, navitem } 'react-bootstrap'; import { linkcontainer } 'react-router-bootstrap'; import {connect} 'react-redux'; import * actioncreators '../action_creators'; import subnav './subnavbar.jsx';  class mainnav extends component {      constructor(props) {         super(props);         this.state = {          loggedin: 1,         };     }     render() {         return (              <div>                 <navbar inverse fixedtop collapseonselect>                     <navbar.header>                         <navbar.brand>                             <a href="/">sportsspot</a>                         </navbar.brand>                     <navbar.toggle />                     </navbar.header>                     <navbar.collapse>                         <nav>                             <linkcontainer to="/nfl" activeclassname="active">                                <navitem onclick={this.props.getcurrentnflnews} eventkey={1}>nfl</navitem>                             </linkcontainer>                             <linkcontainer to="/mlb" activeclassname="active">                                <navitem onclick={this.props.getcurrentmlbnews} eventkey={2}>mlb</navitem>                             </linkcontainer>                             <linkcontainer to="/nba" activeclassname="active">                                <navitem onclick={this.props.getcurrentnbanews} eventkey={3}>nba</navitem>                             </linkcontainer>                             <linkcontainer to="/nhl" activeclassname="active">                                <navitem onclick={this.props.getcurrentnhlnews} eventkey={4}>nhl</navitem>                             </linkcontainer>                            </nav>                     <nav pullright>                         <linkcontainer to="/login">                                 <navitem>login</navitem>                         </linkcontainer>                         <linkcontainer to="/signup">                             <navitem>sign up</navitem>                         </linkcontainer>                     </nav>                     </navbar.collapse>                 </navbar>                  <subnav/> // adding subnavbar code here                  <div classname="content">                         {this.props.children}                 </div>             </div>         )     } }  mainnav.proptypes = {   children: proptypes.element.isrequired,   getcurrentnhlnews : proptypes.func.isrequired,   getcurrentmlbnews : proptypes.func.isrequired,   getcurrentnflnews : proptypes.func.isrequired,   getcurrentnbanews : proptypes.func.isrequired, };  export default connect(null,actioncreators)(mainnav);

and subnavbar has following code

import react, { component} 'react'; import { navbar, nav, navitem } 'react-bootstrap'; import { linkcontainer } 'react-router-bootstrap'; import {connect} 'react-redux'; import * actioncreators '../action_creators';  class subnav extends component {     render() {         return (                 <navbar collapseonselect>                     <navbar.header>                         <navbar.brand>                             nfl                         </navbar.brand>                     <navbar.toggle />                     </navbar.header>                     <navbar.collapse>                         <nav>                             <linkcontainer to="/scores">                                <navitem>scores</navitem>                             </linkcontainer>                             <linkcontainer to="/schedules">                                <navitem>schedule</navitem>                             </linkcontainer>                             <linkcontainer to="/standings">                                <navitem >standings</navitem>                             </linkcontainer>                             <linkcontainer to="/stats">                                <navitem>stats</navitem>                             </linkcontainer>                              <linkcontainer to="/teams">                                <navitem>teams</navitem>                             </linkcontainer>                           </nav>                     </navbar.collapse>                 </navbar>         );     } }  export default connect(null,actioncreators)(subnav);

i want render subnavbar beneath main navbar. tried importing subnavbar.jsx in main navbar , added doesn't seem render. adding routes code below

const routes =<div>     <mainnav>     <app>     <switch>         <route exact path="/" component={homepagecontainer}/>         <route exact path="/nfl" component={subsportshomepagecontainer}/>         <route exact path="/nhl" component={subsportshomepagecontainer}/>         <route exact path="/nba" component={subsportshomepagecontainer}/>         <route exact path="/mlb" component={subsportshomepagecontainer}/>         <route path ="/login" component = {loginpage}/>         <route path ="/signup" component = {signuppage}/>     </switch>     </app>  </mainnav> <subnav>         <switch>             <route exact path="/scores" component={scores}/>             <route exact path="/schedules" component={schedule}/>             <route exact path="/standings" component={standings}/>             <route exact path="/stats" component={stats}/>             <route path ="/teams" component = {teams}/>         </switch> </subnav> </div>

i know mistake committing. in advance


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more