ReactJS Design Patterns - Class vs. Custom Component

Question

I'm trying to get more familiar with best practices and design patterns using React, and I have a question about which of two similar solutions is the proper one:

The first solution uses a class not extending a component, and it's constructor returns an element set based off of an object, it seems to be a little cleaner looking and less overall code.

class PostEntryElement {
	constructor(postObjectArray) {
		return (
      postObjectArray.map((postObject, index) => {
        return (
          <li style={{marginTop: '20px'}}>
            Author: {postObject.author}, 
            Body: {postObject.body},
            Created: {postObject.created},
            Title: {postObject.title}
          </li>
        )
       })
     )
	}
}

class MyComponent extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			exampleAPIBlogPostsResponse: [
				{
					title  : 'Title 1',
					body   : 'Body 1',
					author : 'Author 1',
					created: 'Created 1'
				}, {
					title  : 'Title 2',
					body   : 'Body 2',
					author : 'Author 2',
					created: 'Created 2'
				}, {
					title  : 'Title 3',
					body   : 'Body 3',
					author : 'Author 3',
					created: 'Created 3'
				}
			]
		};
	}

	render() {
		return (
			<div>
      	See All Posts Below:
				<div>
        { 
          this.state.exampleAPIBlogPostsResponse && 
          new PostEntryElement(this.state.exampleAPIBlogPostsResponse)
        }
	      </div>
			</div>
		);
	}
}

React.render(<MyComponent />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

The second solution uses a custom component with properties, and passes them in dynamically from objects, but has more code and seems less 'clean'.

class PostEntryElement extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		return (
          <li style={{marginTop: '20px'}}>
            Author: {this.props.author}, 
            Body: {this.props.body},
            Created: {this.props.created},
            Title: {this.props.title}
          </li>
		);
	}
}

class MyComponent extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			exampleAPIBlogPostsResponse: [
				{
					title  : 'Title 1',
					body   : 'Body 1',
					author : 'Author 1',
					created: 'Created 1'
				}, {
					title  : 'Title 2',
					body   : 'Body 2',
					author : 'Author 2',
					created: 'Created 2'
				}, {
					title  : 'Title 3',
					body   : 'Body 3',
					author : 'Author 3',
					created: 'Created 3'
				}
			]
		};
	}

	generatePosts() {
		return (this.state.exampleAPIBlogPostsResponse.map((postObject, index) => {
			return (
       <PostEntryElement
				title={postObject.title}
				body={postObject.body}
				author={postObject.author}
				created={postObject.created} 
       />
      )
		 })
    );
	}

	render() {
		return (
			<div>
        See All Posts Below:
				<div>
					{this.state.exampleAPIBlogPostsResponse && this.generatePosts()}
				</div>
			</div>
		);
	}
}

React.render(<MyComponent />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Answer 1

In React your state should be managed by container components. Containers should generally be classes that extend Component. Presentational components should be stateless pure functions that render according to properties provided by their container.

If you're interested, Thinking in React is a great introduction to React, and how components should interact with each other.