Reactjs: returning children with cloneElement - reactjs

Question

I'm new to this and following a tutorial. I've actually copied the code from the starter files but the children do now show in the React devtools, hence not rendering. The components are fine and I can render them individually. PhotoGrid doesn't show as a child of Main that's all. This is the code:
Main.js
import React from 'react';
import { Link } from 'react-router';
const Main = React.createClass({
render() {
const props = this.props;
return (
<div>
<h1>
<Link to="/">Reduxstagram</Link>
</h1>
{ React.cloneElement(props.children, props) }
</div>
);
}
});
export default Main;
App.js
import React from 'react';
import { render } from 'react-dom';
// Import css
import css from './styles/style.styl';
// Import Components
import Main from './components/Main';
import Single from './components/Single';
import PhotoGrid from './components/PhotoGrid';
// import react router deps
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
render(
<Router history={browserHistory}>
<Route path="/" component={Main}>
<IndexRoute component={PhotoGrid}></IndexRoute>
<Route path="/view/:postId" component={Single}></Route>
</Route>
</Router>, document.getElementById('root'));

Answer 1

{ props.children } will render the children of the component (from your question I see no need to use React.cloneElement). See modified code below:
const Main = React.createClass({
render() {
const props = this.props;
return (
<div>
<h1>
<Link to="/">Reduxstagram</Link>
</h1>
{ props.children }
</div>
);
}
});
Sidenote
React-router has recently been updated to v4. You may want to use the new router (docs for react-router-4).