eddyw

import React from 'react'
import propTypes from 'prop-types'
import { render } from 'react-dom'

class Form extends React.Component {
  static propTypes = {
    onSubmit: propTypes.func.isRequired,
  }
  constructor(...rest) {
    super(...rest)

eddyw

const Form = ({ frmref, onSubmit }) => (
  <form ref={frmref} onSubmit={onSubmit}>
    <input name="example" type="text" />
  </form>
)

eddyw

const SomeComponent = () => (
  <span>Example</span>
)
// and later somewhere in your code
<SomeComponent ref={handleRefs} />

eddyw

const todoList = [
  { title: 'Do laundry', completed: true },
  { title: 'Pet kitty', completed: false },
  { title: 'Secret Project', completed: false },
]

eddyw

const TodoList = () => (
  <ul>
    {todoList.map((item, key) => (
      <li key={key}>{item.title} : {String(item.completed)}</li>
    ))}
  </ul>
)

eddyw

const completedStyle = { color: 'green' }
const uncompletedStyle = { color: 'red' }
const TodoList = () => (
  <ul>
    {todoList.map(({ title, completed }, key) => (
      <li key={key}>
        <span>{completed ? 'o' : 'x'} </span>
        <span style={completed ? completedStyle : uncompletedStyle}>{title}</span>
      </li>
    ))}

eddyw

const completedStyle = { color: 'green' }
const uncompletedStyle = { color: 'red' }

const Item = ({ title, completed }) => (
  <li>
    <span>{completed ? 'o' : 'x'} </span>
    <span style={completed ? completedStyle : uncompletedStyle}>{title}</span>
  </li>
)

eddyw

class MapArray extends React.Component {
  static propTypes = {
    from: propTypes.array.isRequired,
    children: propTypes.element.isRequired,
    map: propTypes.func,
  }
  static defaultProps = {
    map: e => e,
  }
  shouldComponentUpdate(nextProps) {

eddyw

const completedStyle = { color: 'green' }
const uncompletedStyle = { color: 'red' }
const Item = ({ title, completed }) => (
  <li>
    <span>{completed ? 'o' : 'x'} </span>
    <span style={completed ? completedStyle : uncompletedStyle}>{title}</span>
  </li>
)
const TodoList = () => (
  <ul>

eddyw

const Item = ({ title, completed, check, style, className }) => (
  <li className={className}>
    <span>{check} ({String(completed)}) </span>
    <span style={style}>{title}</span>
  </li>
)
const map = item => ({
  ...item,
  check: item.completed? 'o' : 'x',
  style: item.completed? { color: 'gree' } : { color: 'red' },