SOURCE

class Blog extends React.Component {
    constructor(props) {
        super(props)
        const posts = this.props.posts
        this.sidebar = (
            <ul>
                {
                    posts.map(post => (
                        <li key={post.id}>
                            {post.title}
                        </li>
                    ))
                }
            </ul>
        )
        this.content = (
            posts.map(post => (
                <div key={post.id}>
                    <h3>{post.title}</h3>
                    <p>{post.content}</p>
                </div>
            ))
        )
    }
    render() {
        return (
            <div>
                {this.sidebar}
                <hr />
                {this.content}
            </div>
        )
    }

}
const posts = [
    { id: 1, title: 'Hello World', content: 'Welcome to learning React!' },
    { id: 2, title: 'Installation', content: 'You can install React from npm.' }
]
ReactDOM.render(
    <Blog posts={posts}/>,
    document.getElementById('app')
)

<div id="app"></div>