text: import React, {Component} from 'react';
  import {BrowserRouter as Router, Route} from  'react-router-dom';
  import './App.css';
  import axios from 'axios';
  import Todos from './components/Todos';
  import Header from './components/layout/Header';
  import AddTodo from './components/AddTodo';
  import About from './components/pages/About'
  
  // const uuid = require('uuid');
  class App extends Component{
  
    state = {
      todos: []
    }
  
    // LIfe Cycle Method (After component cycle)
    componentDidMount(){
      axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
      .then(req => this.setState({todos: req.data}))
      .catch(e => console.log(e));
    }
  
    markComplete = (id) => {
      this.setState({
        todos: this.state.todos.map(todo => {
          if(todo.id == id){
            todo.completed = !todo.completed;
          }
          return todo;
        })
      })
    }
  
    addTodo = (title) => {
      
      axios.post('https://jsonplaceholder.typicode.com/todos', {
        title, completed: false
      })
      .then(res => this.setState({todos: [...this.state.todos, res.data]}))
    }
  
    delTodo = (id) => {
      axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`)
      .then(req => this.setState({todos: [...this.state.todos.filter(todo => todo.id != id)]}));
    }
      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;
   