I'm making a simple ToDo list and want to pass data from the child `ToDos` component to the parent `Container` component. The way I am currently doing it works, however I want to be able to access the key attribute which I use in the `Todos` component so that I can simply use its value (index) to splice from the array in the parent. How can I access the `key` attribute that is defined in `ToDos` in the parent `Container` component?

```
const ToDos = (props) => {
  let todos = props.todos.map((value,index) => {
    return <li key={index} onClick={props.onClick}>{value}</li>
  });
  return <ul>{todos}</ul>
};

class Container extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      input: '', 
      todos: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleChange(event){
    this.setState({input: event.target.value})
  }

  handleSubmit(event){
    let arr = this.state.todos;
    let input = this.state.input;
    this.setState({todos: [...arr, input], input: ''})
    event.preventDefault();
  }

  handleClick(event,data){
    let todos = this.state.todos;
    let value = event.target.innerHTML;
    let idx = todos.indexOf(value);
    todos.splice(idx, 1)
    this.setState({todos: todos})
  }

  render(){
    return (
      <div>
        <h1>My todo List</h1>
        <form onSubmit={this.handleSubmit}>
          <input 
            type='text' 
            value={this.state.input} 
            onChange={this.handleChange} />
          <input type='submit' />
        </form>
        <ToDos onClick={this.handleClick} todos={this.state.todos} />
      </div>
    )
  }
}

ReactDOM.render(
  <Container />,
  document.getElementById('root')
);

```