<div id="root"></div>
const Post = props => {
  return (
    <div>
      <h2>{props.post.title.rendered}</h2>
    </div>
  );
};

const Posts = props => {
  return (
    <div>
      {props.posts.map(post => {
        return <Post post={post} key={post.id} />;
      })}
    </div>
  );
};

const posts = [
  {
    title: { rendered: "Hi Roy" },
    id: 1
  },
  {
    title: { rendered: "Hello Roy" },
    id: 2
  }
];
ReactDOM.render(<Posts posts={posts} />, document.getElementById("root"));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react/umd/react.development.js
  2. https://unpkg.com/react-dom/umd/react-dom.development.js