HOC Sample 1: No HOC

HOCSample-1.jsx

const Card = ({ card }) => (
  <div className="card">
    <div className="card-content" style={{ color: card.color }}>
      {card.name}
    </div>
  </div>
)

class List extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      cards: DataSource.getCards(props.list.id),
    }
    this.handleChange = this.handleChange.bind(this)
  }
  componentDidMount() {
    DataSource.addChangeListener(this.handleChange);
  }
  componentWillUnmount() {
    DataSource.removeChangeListener(this.handleChange);
  }
  handleChange() {
    this.setState({
      cards: DataSource.getCards(this.props.list.id)
    })
  }
  render() {    
    return (
      <div className="column"
        style={{ backgroundColor: this.props.list.color }}>
        <header>{`${this.props.list.name} (id:${this.props.list.id})`}</header>
        {this.state.cards.map((card, idx) => 
          <Card card={card} key={idx} />
        )}
      </div>
    )
  }
}

class Board extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      lists: DataSource.getLists()
    }
    this.handleChange = this.handleChange.bind(this)
  }
  componentDidMount() {
    DataSource.addChangeListener(this.handleChange);
  }
  componentWillUnmount() {
    DataSource.removeChangeListener(this.handleChange);
  }
  handleChange() {
    this.setState({
      lists: DataSource.getLists()
    })
  }
  render() {
    return (
      <div className="columns">
        {this.state.lists.map(list => 
         <List list={list} key={list.id} />
        )}
      </div>
    )
  }
}