Pseudo-code example of single Modal, which is triggered by items in a list that also pass in their data. After editing that data, how can I ensure that the right list item gets it's value back?

listWithModal.js

var Modal = React.createClass({
  getInitialState() {
    return {
      text: this.props.text
    };
  },
  onChange(e) {
    this.setState({text: e.target.value});
  },
  closeModal() {
    this.props.closeModal(this.state.text)
  },
  render() {
    return (
      <div>
        <textarea value={this.state.text} onChange={this.onChange}/>
        <button onClick={this.closeModal}></button>
      </div>
    );  
  }
});

var ListItem = React.createClass({
  onClick() {
    this.props.openModal();
  },
  render() {
    return <li onClick={this.onClick}>{this.props.text}</li>
  }
});

var Main = React.createClass({
  openModal() {
    // do something to open the modal
  },
  closeModal(updatedText) {
    // new text received which belongs to one of the ListItems. What do i do with it to ensure that the right ListItem gets updated with rerendering
  },
  render() {
    var items = this.props.items.map((item, idx) => <ListItem key={idx} openModal={this.openModal.bind(this) text={item.text}} />)
    return (
      <section>
        <ul>{items}</ul>
        <Modal text={this.props.text} closeModal={this.closeModal} />
      </section>
    );
  }
});