react-materialize SideNav & trigger placement

Question

I've been working on a website and trying to use the SidNav from react-materialize. I have a router with two component being rendered :

<Router>
    <div>
      <Route path="/" component={NavBar} />
      <Route path="/" component={Home} />
    </div>
  </Router>

I want to put the trigger button form NavBar in the Home component.

<SideNav
    trigger={<Button>SIDE NAV DEMO</Button>}
    options={{ closeOnClick: true }}
  >

  </SideNav>

I want to reuse the sidebar in multiple component, How could I do that ?

Answer 1

you may write you code like this

ResusableSideNav.js

import 'react' from 'React'
import sideNave from 'react/materialcomponent'

class ResusableSideNav extends React.component {
    render(){
        return(
            <SideNav
                trigger={<Button></Button>}
                options={{ closeOnClick: true }}
            >
                <SideNavItem userView
                        user={{
                        background: 'img/office.jpg',
                        image: 'img/yuna.jpg',
                        name: this.Prop1.value,
                        email: this.Prop2.value
                    }}
                />
            </SideNav>
        )
    }
}

Home.js

import 'react' from 'React'
import ResuableSideNav from the "address where you worte"

class Home extends React.Component {
    render(){
        <ResuableSideNav prop1={value} {...otherProps}/>
    }
}