class MessageContainer extends Component {
  constructor (props) {
    super(props)
      this.state = {
        onlyUnread: false,
        messages: []
      }
  }
  componentDidMount () {
    $.ajax({
      url: "/api/messages",
    }).then(({messages}) => this.setState({messages}))
  }
  handleClick = () => this.setState({onlyUnread: !this.state.onlyUnread})
  render () {
    return <MessageList
      messages={this.state.messages.filter(msg => this.state.onlyUnread ? !msg.asRead : true)}
      toggleUnread={this.handleClick}
    />
  }
}
function MessageList ({messages, toggleUnread}) {
  return (
    <div class="message">
      <ul>
            .map(({content, author}) => {
              return <li>{content}—{author}</li>
            })
        }
      </ul>
      <button onClick={toggleUnread}>toggle unread</button>
    </div>
  )
}
MessageList.propTypes = {
  messages: propTypes.array.isRequired,
  toggleUnread: propTypes.func.isRequired
}

• React AJAX Best Practices