Stateless Functional Components

examples.js

// concise inline example that returns an image tag
const UserAvatar = (props) => <img src={props.avatar} />

/* 
  + logic is contained within a single jsx statement
  + making things even more concise you can destructure props and set default values thanks to babel and es6
  + each stateless components recieves props, context, and updater as arguments
*/

const UsersAvatarList = ({ data = [] }, context, updater) => (
  <ul>
    { data.map((item) => <UserAvatar avatar={item.avatar} />) }
  </ul>
);

/* 
  + logic is being performed outside of our jsx. this is good for transforms but avoid defining functions because they will be defined each re-render
  + stateless components do not have a backing instance, so accessing <UsersAvatarList /> by ref will not work. You will need to wrap the stateless component with a class component.
*/
const Body = (props) => {
  const data = [1, 2, 3].map(() => faker.helpers.contextualCard()); // mock data - live example on codepen
  
  return (
    <div>
      <h1> Users Avatar List </h1>
      <UsersAvatarList data={data} ref='usersAvatarList'/>
    </div>
  );
}

// propTypes and contextTypes are supported
UsersAvatarList.propTypes = {
  data: React.PropTypes.array.isRequired
};

// http://codepen.io/brukh/pen/ozkLqd