Created
February 8, 2018 18:22
-
-
Save AntoninMarchardDev/2d3cdb7aa6dd7a7ae5fda85aab89eccc to your computer and use it in GitHub Desktop.
Correction TODO LIST - React
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| class TodoList extends Component { | |
| constructor() { | |
| super(); | |
| this.state = { | |
| userInput: '', | |
| items: [] | |
| }; | |
| } | |
| onChange(event) { | |
| this.setState({ | |
| userInput: event.target.value | |
| }); | |
| } | |
| addTodo(event) { | |
| event.preventDefault(); | |
| this.setState({ | |
| userInput: '', | |
| items: [...this.state.items, this.state.userInput] | |
| }); | |
| } | |
| deleteTodo(item) { | |
| // no event | |
| // pass the item to indexOf | |
| const array = this.state.items; | |
| const index = array.indexOf(item); | |
| array.splice(index, 1); | |
| this.setState({ | |
| items: array | |
| }); | |
| } | |
| // add item to deleteTodo.bind(this, item) | |
| renderTodos() { | |
| return this.state.items.map((item) => { | |
| return ( | |
| <div className="list-group-item" key={item}> | |
| {item} | <button onClick={this.deleteTodo.bind(this, item)}>X</button> | |
| </div> | |
| ); | |
| }); | |
| } | |
| render() { | |
| return( | |
| <div> | |
| <h1 align="center">Ma Todo list</h1> | |
| <form className="form-row align-items-center"> | |
| <input | |
| value={this.state.userInput} | |
| type="text" | |
| placeholder="Renseigner un item" | |
| onChange={this.onChange.bind(this)} | |
| className="form-control mb-2" | |
| /> | |
| <button | |
| onClick={this.addTodo.bind(this)} | |
| className="btn btn-primary" | |
| > | |
| Ajouter | |
| </button> | |
| </form> | |
| <div className="list-group"> | |
| {this.renderTodos()} | |
| </div> | |
| </div> | |
| ); | |
| } | |
| } | |
| export default TodoList; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment