Question

How to create a simple todo app with state array in React JS

Answer 1

// App.js

import React, { Component } from 'react';
import Header from './projects/Header'
import './App.css';
import ToDo from './projects/ToDo'
import AddToDo from './projects/AddToDo'
import uuid from 'uuid'

class App extends Component {
    state = {
      todoApp: [
        {
          id: uuid.v4(),
          mission: 'Read a book',
          completed: false
        },
        {
          id: uuid.v4(),
          mission: 'Watch a movie',
          completed: false
        },
        {
          id: uuid.v4(),
          mission: 'Write the code',
          completed: false
        },
        {
          id: uuid.v4(),
          mission: 'Play with kids',
          completed: false
        },
      ]
    }

    markMissionCompleteApp = (id) => {
        this.setState({todoMC: this.state.todoApp.map(todo => {
          if (todo.id === id) {
            todo.completed = !todo.completed;
          }
          return todo;
        }) });
    }

    deleteToDoApp = (id) => {
        this.setState({todoApp: [...this.state.todoApp.filter(todo => todo.id !== id)]});
    }

    AddToDoApp = (mission) => {
        const newToDo = {
          id: uuid.v4(),
          mission,
          completed: false
        }
        this.setState({ todoApp: [...this.state.todoApp, newToDo] })
    }

    render() {
        return (
          <div className="App">
              <div className="container">
              <Header />
              <AddToDo AddToDoApp={this.AddToDoApp} />
              <ToDo todoAP={this.state.todoApp} 
                    markMissionCompleteToDo={this.markMissionCompleteApp}
                    deleteToDo={this.deleteToDoApp}/>
              </div>
          </div>
      );
    }
}

export default App;



/*
run:

42852e61-750c-41f1-b3a7-28f1a959a0fd: Read a book - false

6340a874-6b57-4b03-a46c-b14a04ea9009: Watch a movie - false

e35547a8-358b-4e73-a255-d7bb24b4d9ab: Write the code - true

a56ff352-2bdb-4547-b0ac-eec384047c20: Play with kids - true

a8ea75dc-206c-4723-a21a-8643050e7501: new mission - false

*/

// todo/src/projects/Header.js

import React from 'react'

function Header() {
  return (
    <header style={headerStyle}>
         <h1>ToDo</h1>
    </header>
  )
}

const headerStyle = {
    color: '#333cff'
}

export default Header;

// todo/src/projects/ToDo.js

import React, { Component } from 'react';
import ToDoItem from './ToDoItems';
import PropTypes from 'prop-types'; 

class ToDo extends Component {
    render() {
        return this.props.todoAP.map((td) => (
            <ToDoItem key={td.id} 
                      todo={td} markMissionCompleteToDoItems={this.props.markMissionCompleteToDo}
                      deleteToDoItem={this.props.deleteToDo}/>
        ));
        
    }
}

ToDo.propTypes = {
    todoAP: PropTypes.array.isRequired
}

export default ToDo;

// todo/src/projects/ToDoItems.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'; 

// Component
export class ToDoItems extends Component {
  setStyle = () => {
    return {
      backgroundColor: '#f3ff33',
      textDecoration: this.props.todo.completed ? 'line-through' : 'none'
    }
  }

  render() {
    const { id, mission, completed} = this.props.todo;
    return (
      <div style = { this.setStyle() } >
          <h3>
          <input type="checkbox" 
                 onChange={this.props.markMissionCompleteToDoItems.bind(this, id)}/> {''} 
                 {`${id}: ${mission} - ${completed}`}
                 <button onClick={this.props.deleteToDoItem.bind(this, id)} 
                         style={btnStyle}>X</button>
          </h3>
      </div>
    )
  }
}

ToDoItems.propTypes = {
  todo: PropTypes.object.isRequired
}

const btnStyle = {
    color: '#FF0000',
    background: '#228B22',
    float: 'right',
    cursor: 'pointer'
}

export default ToDoItems

// todo/src/projects/AddToDo.js

import React, { Component } from 'react'

export class AddToDo extends Component {
    state = {
        mission: ''
    }

    onSubmit = (e) => {
        e.preventDefault();
        this.props.AddToDoApp(this.state.mission);
        this.setState({mission: ''})
    }

    onChange = (e) => this.setState({[e.target.name]: e.target.value});

    render() {
        return (
        <form onSubmit={this.onSubmit} style={{display: 'flex'}}>
            <input type="text" name="mission" placeholder="Add mission..." 
                   value={this.state.mission}
                   onChange={this.onChange}  />
            <input type="submit" value="submit" className="btn" style={{flex: '1'}} />
        </form>

        )
    }
}

export default AddToDo

 

70+ SQL courses for beginners and professionals