React Templating

Using a default template while allowing a custom one.

by andyjmeyers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

class CustomRow extends React.Component {
	render(){
		return <li>{this.props.item.name} has {this.props.item.moons} moons</li>
  }
} 

class DefaultRow extends React.Component {

	render(){
  	return <li>{this.props.item.name}</li>;
  }
}

class CustomList extends React.Component {

	render() {
  	const ItemTemplate = this.props.itemTemplate || DefaultRow;
		return (
    	<ul className="list-container">
      	{this.props.items.map((item) => <ItemTemplate item={item} />)}
      </ul>
    );
  }

}

class App extends React.Component {
	
  render(){

  	return ( <div>
    	<h4>Non-custom template </h4>
      <CustomList items={this.props.items} />
      <h4>Custom Template </h4>
      <CustomList items={this.props.items} itemTemplate={CustomRow} />
    </div>);
  }
}

const items = [
	{
  	name: 'Mercury',
    moons: 0    
  },
  {
  	name: 'Venus',
    moons: 0
  },
  {
  	name: 'Earth',
    moons: 1
  },
  {
  	name: 'Mars',
    moons: 2
  },
  {
  	name: 'Jupiter',
    moons: 67
  },
  {
  	name: 'Saturn',
    moons: 62
  },
	{
  	name: 'Uranus',
    moons: 27
  },
  {
  	name: 'Neptune',
    moons: 14
  },
  {
  	name: 'Pluto',
    moons: 5
  }
];

ReactDOM.render(
  <App items={items} />,
  document.getElementById('container')
);