Merge pull request #3 from reinbeumer/fixing-adding-multiple-todos

fix issue #2 id error on adding multiple todos

src/App.js

@@ -4,64 +4,84 @@ import Header from './components/layout/Header';
 import Todos from './components/Todos';
 import AddTodo from './components/AddTodo';
 import About from './components/pages/About';
-// import uuid from 'uuid';
+import uuid from 'uuid';
 import axios from 'axios';
 
 import './App.css';
 
 class App extends Component {
-  state = {
-    todos: []
-  }
+	state = {
+		todos: []
+	};
 
-  componentDidMount() {
-    axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
-      .then(res => this.setState({ todos: res.data }))
-  }
+	componentDidMount() {
+		axios
+			.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
+			.then((res) => this.setState({ todos: res.data }));
+	}
 
-  // Toggle Complete
-  markComplete = (id) => {
-    this.setState({ todos: this.state.todos.map(todo => {
-      if(todo.id === id) {
-        todo.completed = !todo.completed
-      }
-      return todo;
-    }) });
-  }
+	// Toggle Complete
+	markComplete = (id) => {
+		this.setState({
+			todos: this.state.todos.map((todo) => {
+				if (todo.id === id) {
+					todo.completed = !todo.completed;
+				}
+				return todo;
+			})
+		});
+	};
 
-  // Delete Todo
-  delTodo = (id) => {
-    axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`)
-      .then(res => this.setState({ todos: [...this.state.todos.filter(todo => todo.id !== id)] }));
-  }
+	// Delete Todo
+	delTodo = (id) => {
+		axios
+			.delete(`https://jsonplaceholder.typicode.com/todos/${id}`)
+			.then((res) =>
+				this.setState({
+					todos: [...this.state.todos.filter((todo) => todo.id !== id)]
+				})
+			);
+	};
 
-  // Add Todo
-  addTodo = (title) => {
-    axios.post('https://jsonplaceholder.typicode.com/todos', {
-      title,
-      completed: false
-    })
-      .then(res => this.setState({ todos: [...this.state.todos, res.data] }));
-  }
+	// Add Todo
+	addTodo = (title) => {
+		axios
+			.post('https://jsonplaceholder.typicode.com/todos', {
+				title,
+				completed: false
+			})
+			.then((res) => {
+				res.data.id = uuid.v4();
+				this.setState({ todos: [...this.state.todos, res.data] });
+			});
+	};
 
-  render() {
-    return (
-      <Router>
-        <div className="App">
-          <div className="container">
-            <Header />
-            <Route exact path="/" render={props => (
-              <React.Fragment>
-                <AddTodo addTodo={this.addTodo} />
-                <Todos todos={this.state.todos} markComplete={this.markComplete} delTodo={this.delTodo} />
-              </React.Fragment>
-            )} />
-            <Route path="/about" component={About} />
-          </div>  
-        </div>
-      </Router>
-    );
-  }
+	render() {
+		return (
+			<Router>
+				<div className='App'>
+					<div className='container'>
+						<Header />
+						<Route
+							exact
+							path='/'
+							render={(props) => (
+								<React.Fragment>
+									<AddTodo addTodo={this.addTodo} />
+									<Todos
+										todos={this.state.todos}
+										markComplete={this.markComplete}
+										delTodo={this.delTodo}
+									/>
+								</React.Fragment>
+							)}
+						/>
+						<Route path='/about' component={About} />
+					</div>
+				</div>
+			</Router>
+		);
+	}
 }
 
 export default App;