Delete todo from state array react - reactjs

Question

I am building an simple todo app to practise reactjs I have 3 components which looks like this:
Here is the TodoAppComponent.js which is the wrapper of the other two components:
import AddTodoComponent from '../AddTodoComponent/AddTodoComponent';
class TodoAppComponent extends Component {
render() {
return (
<div id="page-content-wrapper">
<div className="container">
<div className="row">
<div className="col-lg-6 col-lg-offset-3">
<h1 className="m-b-md">What needs to be done?</h1>
<AddTodoComponent></AddTodoComponent>
</div>
</div>
</div>
</div>
);
}
}
export default TodoAppComponent;
An AddTodoComponent.jsx where I can add an todo:
import TodoItemComponent from '../TodoItemComponent/TodoItemComponent';
class AddTodoComponent extends Component {
constructor(props) {
super(props);
this.state = {
todo: '',
todoArray: []
};
}
addTodo(e){
this.setState({ todo: e.target.value });
this.state.todoArray.push(<TodoItemComponent todo={this.state.todo}></TodoItemComponent>);
}
handleChange(e) {
this.setState({ todo: e.target.value });
}
render() {
return (
<div>
<div className="input-group m-b-md">
<input type="text" className="form-control add-todo" placeholder="Todo..." value={this.state.todo} onChange={this.handleChange.bind(this)} />
<span className="input-group-btn">
<button className="btn btn-react" type="button" onClick={this.addTodo.bind(this)}>Add</button>
</span>
</div>
<ul className="list-group">
{this.state.todoArray}
</ul>
</div>
);
}
}
export default AddTodoComponent;
As you see I push the TodoItemComponent to an state array.
Here is the TodoItemComponent.jsx:
class TodoItemComponent extends Component {
deleteTodo(){
// this.setState({
// data: update(this.state.data, {$splice: [[index, 1]]})
// })
}
render() {
console.log(this.props.todo, this.props.title);
return (
<div>
<li className="list-group-item todo-item">
<button className="btn btn-xs btn-react btn-circle m-r-md">
<span className="fa fa-check"></span>
</button>
{this.props.todo}
<span className="pull-right">
<button className="btn btn-xs btn-react btn-circle m-r-xs">
<span className="fa fa-pencil-square-o"></span>
</button>
<button className="btn btn-xs btn-react btn-circle" onClick={this.deleteTodo()}>
<span className="fa fa-trash-o"></span>
</button>
</span>
</li>
</div>
);
}
}
export default TodoItemComponent;
As you see I have a button where I can delete the todo item. But how can I acces the state in this file to delete it from the state array?

Answer 1

you can try this
deleteTodo(){
this.props.onDelete(this.props.todo);
}
and in yourAdddTodoComponent
addTodo(e){
this.setState({ todo: e.target.value });
this.state.todoArray.push(<TodoItemComponent onDelete={this.delete} todo={this.state.todo}></TodoItemComponent>);
}
delete:function(index)
{
this.setState({
// data: update(this.state.data, {$splice: [[index, 1]]})
// })
}