Cacher is the code snippet organizer for pro developers

import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";

// the JSON from the previous example would go in here
// Omitting for brevity
const userFields = [{}];

class PageClass extends Component {
	
	// notice how we wrap the elements
	// in a fragment instead of adding
	// yet another DOM element
	static userType( user ) {
		return (
			<Fragment>
				<h3>{user.name}</h3>
				<p>{user.job}</p>
			</Fragment>
		);
	}
	
	render() {
		const { fields } = this.props;
		
		// example here to show you can 
		// give each fragment a key but
		// not anything else like className
		return (
			<section>
				{fields.map( f => (
					<Fragment key={f.id}>
						{PageClass.userType(f)}
					</Fragment>
				))}
			</section>
		);
	}
}

const root = document.getElementById( 'root' );
ReactDOM.render( <PageClass fields={userFields} />, root );