Reversing Data Flow

MyClickableList.js

let ClickableList = React.createClass({
  render(){
    let { inputs, onClickItem } = this.props;
    return (
      <ul>
        {inputs.map((input,i)=>
          <li key={i} onClick={onClickItem.bind(null, input)}>
          {input}
          </li>
        )}
      </ul>
    )
  }
});

let MyClickableList = React.createClass({
  render(){
    return (
      <ClickableList
        inputs={["one", "two", "three", "four"]}
        onClickItem={this.handleClickInput}
      />
    )
  },
  handleClickInput(input, event){
    console.log(input)
  }
});