Stateless React Components

example.js

class ParentView extends React.Component {
  constructor() {
    this.state = {
      // parent state becomes child props
      items: ["one", "two", "three"]
    }
  }
  
  // item is a complete domain object with enough info to do things with
  onDeleteItem(item) {
    this.setState({items: this.state.items.filter(i => i != item)})
  }
  
  render() {
    var rows = this.state.items.map((item) => {
      return <ItemView item={item} onDelete={this.onDeleteItem.bind(this)} />
    })
    return <div>
      <h1>Items</h1>
      <div>{rows}</div>
    </div>
  }
} 

// This component is completely stateless
// but it COULD also have some state in it
// there's a separation of the data and actions that come from the parent (props)
// and the child (state)
class ItemView extends React.Component {
  
  onClick() {
    // I'm letting the parent handle this action
    this.props.onDelete(this.props.item)
  }
  
  render() {
    return <div>
      <label>{this.props.item}</label>
      <button onClick={this.onClick.bind(this)}>Delete Me</button>
    </div>
  }
}