const { Component } = React; class App extends Component { constructor(props){ super(props); this.state = { todos: [] } this.addTodo = this.addTodo.bind(this); this.deleteTodo = this.deleteTodo.bind(this); } addTodo(todo){ this.setState({todos: [...this.state.todos, todo]}) } deleteTodo(id){ const temp = this.state.todos; temp.splice(id, 1) this.setState({todos: temp}) } render () { return (

React

Create a React app on Codier

{this.state.todos.map((todo, index) => )}

); } } class CustomInput extends Component { constructor(props){ super(props); this.state = { todo: "" } this.handleInput = this.handleInput.bind(this); this.handleClick = this.handleClick.bind(this) } handleInput(e){ this.setState({todo: e.target.value}) } handleClick(e){ this.props.addTodo(this.state.todo); } render(){ return(

) } } class Todo extends Component { constructor(props){ super(props); this.handleClick = this.handleClick.bind(this); } handleClick(e){ this.props.deleteTodo(this.props.id) } render(){ return(

{this.props.todo}

); } } ReactDOM.render(, document.getElementById("root"));

Brendan

rkNNCVQES

S15HmslNH