Alessander França Alessander França - 3 months ago 28
React JSX Question

sidebar with Reactjs

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

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>
    );
  }
} 
Comments