sidebar with Reactjs - reactjs

Question

I am trying to do a sidebar with Reactjs but I am not getting it.
I want to know how to pass the props from App.js to Middle.js correctly.
I have the structure index.js > routes.js > App.js > Header.js, Middle.js > Sidebar.js, (DashboardPage.js, AccountPage.js - pages to be rendered dinamically)
Header.js -> Has a IndexLink at image
Sidebar.js -> Has a IndexLink and a Link to render AccountPage.js
The route is set for App.js, but the component is supposed to load inside the Middle.js component.
Here are my codes:
index.js
import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
render(
<Router history={browserHistory} routes={routes} />, document.getElementById('app')
);
routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/App';
import DashboardPage from './components/middle/dashboard/DashboardPage';
import AccountPage from './components/middle/accounts/AccountPage';
export default (
<Route path="/" component={App}>
<IndexRoute component={DashboardPage} />
<Route path="accounts" component={AccountPage} />
</Route>
);
App.js
import 'babel-polyfill';
import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import Header from './common/Header';
import Middle from './middle/Middle'
import '../../css/style.css';
class App extends React.Component{
var { app } = this.props;
render() {
return (
<div>
<Header />
<Middle />
</div>
);
}
}
export default App;
Header.js // IndexLink at img
'use strict';
import React from 'react';
import User from './User';
import {IndexLink, Link} from 'react-router';
import '../../../css/header.css';
class Header extends React.Component{
render() {
return (
<div className="contactto-header">
<div className="contactto-header-content">
<IndexLink to="/"><img className="contactto-header-content-logo" src="static/img/logo.png" alt="contactto logo" /></IndexLink>
<div className="contactto-header-content-alarm"></div>
<div className="contactto-header-content-user">
<User />
</div>
</div>
</div>
);
}
}
export default Header;
Middle.js
'use strict';
import React, {PropTypes} from 'react';
import '../../../css/middle.css';
import SideBar from './SideBar'
class Middle extends React.Component{
render() {
return (
<div className="contactto-middle">
<div className="contactto-middle-content">
<SideBar />
{app.children} // should render here
</div>
</div>
);
}
}
export default Middle;
Sidebar.js
'use strict';
import React from 'react';
import {IndexLink, Link} from 'react-router';
import '../../../css/sidebar.css';
class SideBar extends React.Component{
render() {
return (
<div className="sidebar-container">
<ul className="sidebar-container-ul">
<li className="sidebar-container-ul-li">
<IndexLink className="sidebar-container-ul-li-a" to="/">Dashboard</IndexLink>
</li>
<li className="sidebar-container-ul-li">
<Link className="sidebar-container-ul-li-a" to="accounts">Contas</Link>
</li>
</ul>
</div>
);
}
}
export default SideBar;
What is wrong?
I am new with React, if another code is not done correctly please tell me :)
Thanks in advance.

Answer 1

First of all, your route components will be available under App through this.props.children. If you want to wrap them with you can try like this:
class App extends React.Component{
render() {
return (
<div>
<Header />
<Middle>
{this.props.children}
</Middle>
</div>
);
}
}
An then in the Middle.js
class Middle extends React.Component{
render() {
return (
<div className="contactto-middle">
<div className="contactto-middle-content">
<SideBar />
{this.props.children}
</div>
</div>
);
}
}

Answer 2

It's a bit unclear what you're asking, but it seems that you want to know how to pass a prop from App.js to Middle.js. Here's how:
class App extends React.Component{
var { app } = this.props;
render() {
return (
<div>
<Header />
<Middle someProp={someValue} />
</div>
);
}
}
Now in Middle.js you can access someProp in this.props.someProp.

Answer 3

Maybe you can use https://www.npmjs.com/package/react-side-bar. There are a complete example in Example and looks fine.
npm install --save react-side-bar