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

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 TodoList = () => (
  <ul>
    {todoList.map((item, key) => (
      <li key={key}>{item.title} : {String(item.completed)}</li>
    ))}
  </ul>
)

eddyw

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

eddyw

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

eddyw

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

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

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,
  }
  render() {
    return (

eddyw

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

class Span extends React.Component {
  static propTypes = {
    children: propTypes.node.isRequired,
  }
  render() {
    return <span>{this.props.children}</span>

eddyw

<section>
  <SwitchIf test={this.props.section}>
    <SwitchIf equals={1} test={this.props.isUserLogged}>
      <SwitchWhen equals={true} render={<SectionUserLogged />} />
      <SwitchWhen equals={false} render={<SectionUserNotLogged />} />
    </SwitchIf>
    <SwitchIf equals={2} test={this.props.isUserAdmin}>
      <SwitchWhen equals={true} render={<SectionDashboard />} />
    </SwitchIf>
    <SwitchWhen equals={3} render={<SectionAbout />} />