Simple TodoLists Application in REACT js using hooks (functional method)

INTRODUCTION

In React, hooks are functions that allow you to hook into React state and life-cycle features from function factors. This allows you to use React without classes. 

 

When you take an original look at the React Hooks attestation, you ’ll see that there are several Hooks that we can use for our operations. You can indeed produce your own. Some of the popular bones include 

useState : returns a stateful value 

useEffect : perform side goods from function factors 

useContext : accepts a environment objects and returns current environment value 

useCallback : pass an inline message and an array of dependencies 

PREREQUISITE

- NODE JS, NPM/YARN , REACT should have already installed in your computer.

-Knowledge how to use the third-party library

- Basic knowledge of 

• REACT JS
• nodemon 

and other necessary packages

CREATING PROJECT

To Create React Application Type: 

• yarn: yarn create react-app todo
• npm: npx create-react-app todo

Now go to todo app and run yarn start (if using Yarn) OR npm start (if using npm). Your project should now be served on localhost:3000. (by default the port is 3000.)

CODING EXAMPLES

• edit App.js   :  get rid of all the code inside return function and add your imported component

  
import './App.css';
import TodoList from './TodoList'

function App() {
  return (
    <TodoList/>
  );
}

export default App;
  
  

• creating component TodoList.js  : Now Code the TodoList.js file by below code

  
import React, { useState } from "react"
import { Container, Form, Button, Alert,Row, Col } from "react-bootstrap"
import "bootstrap/dist/css/bootstrap.css"
import {FaTrash} from "react-icons/fa"

// eslint-disable-next-line

const TodoList=()=>{
    
    const[todoList,setTodoList]=useState([])

    const [text,setText]=useState("")

    const addTodo=()=>{
        setTodoList([
            ...todoList,
            {
            data:text,
            date:new Date().toLocaleString().split(",")[0],
            isCompleted:false
        },
        ]);
        setText("")
    }

    const toggleTodoCompleted=(idx)=>{
       const newTodo= todoList.map((todo,index)=>{
            if(index===idx) return { ...todo, isCompleted:!todo.isCompleted}
            else return todo;
        })
        setTodoList(newTodo)
    }

    const deleteTodo=(idx)=>{
        const newtodo=todoList.filter((todo,index)=>{
            if(index===idx) return false;
            else return true;
        })
        setTodoList(newtodo)
    }

    return(<>
    <Container className="mt-4 text-center">
        <h2>Simple TodoList App</h2>
        <Form.Control type="text" className="mt-4" value={text} onChange={(e)=>setText(e.target.value)}/>
        <Button className="mt-4" onClick={addTodo}>Add</Button>

        <br/>
        <br/>
        <br/>

        {todoList.length>0?todoList.map((todo,index)=>{
            return (
            <Row>
                <Col xs={10}>
                <Alert 
            className="text-start"
            style={{cursor:"pointer", textDecoration :todo.isCompleted? "line-through":"none" }} 
            variant={todo.isCompleted?"danger":"primary"}
            onClick={()=>toggleTodoCompleted(index)}>
                <h2>{todo.data}</h2>                
                <small>{todo.date}</small>
                </Alert>
                </Col>
                <Col className="mt-4">
                <FaTrash size="40" color="red" onClick={()=>deleteTodo(index)}/>
                </Col>
            </Row>
            )
        }):
        "No ToDo's"
    
    }
    </Container>

    </>)

}

export default TodoList;

OUTPUT/RESULTS

Type localhost:3000 on your browser url 

SUMMARY

As in this todo application , user can add tasks and mark it as completed by clicking on 

the task and even user can delete the todo task.