FooTemplate.jsx

import PropTypes from 'prop-types';


/**
 * This is an example presentational component. Check out this article for details on why we use
 * presentational components:
 * https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0.
 *
 * The names of presentational components should be suffixed with '-Template'. This is done so that
 * our React naming conventions align with our Backbone naming conventions.
 *
 * If you can define a presentational component as a functional component, do it! It's simpler :).
 */
function FooTemplate(props) {
  return (
    <div>
      <button onClick={() => this.props.buttonClicked(Date.now())}>Click me</button>

      {props.clickedAt &&
        <span>Clicked at {props.clickedAt}</span>
      }

      <div className='text-grey'>{this.children}</div>
    </div>
  );
}

// You should define propTypes on functional components as well.
FooTemplate.propTypes = {
  /**
   * You should document passed functions JSDoc-style.
   *
   * Handlers defined and used within a class that take `event`s as arguments, should be named
   * `onBlahBlahBlah`. Functions called in response to event that don't take `event`s as arguments
   * and instead perform an action should be named based on their action, eg `updateName`.
   */

  /**
   * @param {Number} time - Time (in ms) at which the button was clicked.
   */
  buttonClicked: PropTypes.func.isRequired,

  name: PropTypes.string.isRequired
};

export default FooTemplate;