Todos List in React

Steps to Complete the Todo List Project.

Step 1: Use Bootstrap

Added the CSS (Head Section) and JS (After Body) files inside the index.html

public/index.html

Step 2: - Bootstrap HTML add inside the app.js file.

Note:- Replace the class to classname.

example:-
return (

< >

<h3> Hello </h3>

<p> My app works </p>
(Bootstrap HTML)

< />

);

Now, display the navigation header using Bootstrap React.

Now we have created the components inside the src folder. Create a new folder named MyComponent.

Step 1:- Header file work

src/MyComponents/Header.js

Step 1:- Import the file into App.js

import Header from './MyComponents/Header';

function App() {

return (

</>

);

}

Header.js

import React from "react";

export default function Header(){

return (

<a className="navbar-brand" href="#">Todos List</a>

</button>

</li>

<a className="nav-link" href="#">About</a>

</li>

</ul>

<button className="btn btn-outline-success" type="submit">Search</button>

</form>

</div>

</nav>

);

}

Props:- Props are used in JavaScript components to pass data from the parent component to the child component.

a:- Using props in the Header file.

Other way

Pass more values:-

export default function Header({title, val1, value2 }){

return (

<nav className="navbar navbar-expand-lg bg-body-tertiary">

<div className="container-fluid">

<a className="navbar-brand" href="#">{title}</a>

</div>

</nav>

);

}

Condition through the props:-

Header.js

import React from "react";

export default function Header(props){

return (

<a className="navbar-brand" href="#">{props.title}</a>

</button>

</li>

<a className="nav-link" href="#">About</a>

</li>

</ul>

{ props.searchBar ? <form className="d-flex" role="search">

<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />

<button className="btn btn-outline-success" type="submit">Search</button>

</form>: "no search bar"}

</div>

</nav>

);

}

App.js

function App() {

return (

{/* Use the new file src/MyComponents/Header.js */}

</>

);

}

default Props:-

Header.js

import React from "react";

import PropTypes from 'prop-types';

export default function Header(props){

return (

<a className="navbar-brand" href="#">{props.title}</a>

</button>

</li>

<a className="nav-link" href="#">About</a>

</li>

</ul>

{ props.searchBar ? <form className="d-flex" role="search">

<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />

<button className="btn btn-outline-success" type="submit">Search</button>

</form>: "no search bar"}

</div>

</nav>

);

}

Header.defaultProps = {

title: "Your Title Here",

searchBar: true,

}

Header.ProtTypes = {

{/* We define that title should be a string. If we give the title like 123, any integer number below the screenshot */}

title: PropTypes.string,

searchBar: PropTypes.bool.isRequired

}

App.js

function App() {

return (

{/* Remove the title attribute, it comes from default Props */}

</>

);

}

Step 2:- To-dos file work
src/MyComponents/Todos.js

If you're not using export default, then import To-dos using curly brackets in the App.js file

Step 1:- Added the array in App.js File

import {Todos} from './MyComponents/Todos';

function App() {

let myName = "Lakhan Thakur"

let todoList = [

{

sno: 1,

title: "Go to the market",

desc: "You need to go the market to get this job done"

{

sno: 2,

title: "Go to the ground",

desc: "You need to go the market to get this job done2"

{

sno: 3,

title: "Go to the mall",

desc: "You need to go the market to get this job done3"

]

return (

<Todos todos={todoList}/>

{/* use the variables */}

{myName}

</>

);

}

export default App;

Todos.js

import React from "react";

import TodoItem from "./TodoItem";

(or import TodoItem from "../MyComponents/TodoItem";)

Step 1:- Return a single todo one by one

export const Todos = (props) => {
return(
{/* Get single todo one by one */}

<TodoItem todo={props.todos[0]}/>

<TodoItem todo={props.todos[1]}/>

<TodoItem todo={props.todos[2]}/>

)}

Step 2: Return the array of to-dos using a loop

export const Todos = (props) => {

return(

{/* Using loop to get the todos */}

{props.todos.map((todo)=>{

return <TodoItem todoList={todo}/>

}

);

}

Step 3: Return the array of todos using a loop and add an extra argument.

export const Todos = (props) => {

return(

{/* Using loop to get the todos */}

{props.todos.map((todo)=>{

return (

<h3>This is test</h3>

<TodoItem todoList={todo}/>

</>

)

})}

);

}

TodoItem.js

import React from "react";
export default function TodoItem({todoList}){
return(
<div>
<h4>{todoList.title}</h4>
<h4>{todoList.desc}</h4>
</div>

);
}

Step 2:- Deleted Action added in App.js File

Step a:- Button calling
App.js

import {Todos} from './MyComponents/Todos';

function App() {

const onDelete = () => {

console.log('Checking.....');

}

let todoList = [

{

sno: 1,

title: "Go to the market",

desc: "You need to go the market to get this job done"

{

sno: 2,

title: "Go to the ground",

desc: "You need to go the market to get this job done2"

{

sno: 3,

title: "Go to the mall",

desc: "You need to go the market to get this job done3"

]

return (

<Todos todos={todoList} onDelete= {onDelete}/>

</>

);

}

export default App;

Todos.js

import React from "react";

import TodoItem from "./TodoItem";

export const Todos = (props) => {

return(

{props.todos.map((todo)=>{

return (

<h3>This is test</h3>

<TodoItem todoList={todo} onDelete={props.onDelete}/>

</>

)

})}

);

}

TodoItem.js

import React from "react";

export default function TodoItem({todoList, onDelete}){

return(

<div>

<h4>{todoList.title}</h4>

<h4>{todoList.desc}</h4>

<button className="btn-danger" onClick={onDelete}>Delete</button>

</div>

);

}

output:-
Click on the button to get the output in the console like:-

Checking.....

Step b:- Button calling array

App.js

import {Todos} from './MyComponents/Todos';

function App() {

const onDelete = (todo) => {

console.log('I am on delete of todo', todo);

}

let todoList = [

{

sno: 1,

title: "Go to the market",

desc: "You need to go the market to get this job done"

{

sno: 2,

title: "Go to the ground",

desc: "You need to go the market to get this job done2"

{

sno: 3,

title: "Go to the mall",

desc: "You need to go the market to get this job done3"

]

return (

<Todos todos={todoList} onDelete= {onDelete}/>

</>

);

}

export default App;

Todos.js

import React from "react";

import TodoItem from "./TodoItem";

export const Todos = (props) => {

return(

{props.todos.map((todo)=>{

return (

<h3>This is test</h3>

<TodoItem todoList={todo} onDelete={props.onDelete}/>

</>

)

})}

);

}

TodoItem.js

import React from "react";

export default function TodoItem({todoList, onDelete}){

return(

<div>

<h4>{todoList.title}</h4>

<h4>{todoList.desc}</h4>

<button className="btn-danger" onClick={()=>{onDelete(todo)}}>Delete</button>

</div>

);

}

Step c:- Button calling for use State Hook Delete one by one item using state hook.

App.js

import {Todos} from './MyComponents/Todos';

import React, { useState } from 'react';

function App() {

const onDelete = (todo) => {

console.log('I am on delete of todo', todo);

       setTodos(todoList.filter((e)=>{
        return e!==todo;
   }));

}

const [todoList, setTodos] = useState([

{

sno: 1,

title: "Go to the market",

desc: "You need to go the market to get this job done"

{

sno: 2,

title: "Go to the ground",

desc: "You need to go the market to get this job done2"

{

sno: 3,

title: "Go to the mall",

desc: "You need to go the market to get this job done3"

]);

return (

<Todos todos={todoList} onDelete= {onDelete}/>

</>

);

}

export default App;

Step d:- The Condition for no todos content is that all contents have been deleted.

Todos.js

import TodoItem from "../MyComponents/TodoItem";

export const Todos = (props) => {

return(

<h3 className="text-center my-3">Todos List</h3>

{ props.todos.length===0?"No Todos to display" :

props.todos.map((todo)=>{

return <TodoItem todoList={todo} key={todo.sno} onDelete={props.onDelete}/>

})

}

</div>

);

}

Step 3:- Added the inline style.

Footer.js

import React from "react";

export default function Footer(){
(Created one object and let's the variable.)

let footerStyle = {

position: "absolute",

top: "100vh",

width: "100%",

}

return (

</p>

</footer>

);

}

Step 4:- Added the style file.

src/MyComponents/add.css

.footerClass {
position: "absolute",
top: "100vh",
width: "100%",

}

src/MyComponents/Footer.js

import './add.css';

import React from "react";

export default function Footer(){
return (
<footer className="bg-dark text-light py-3 footerClass">
<p className="text-center">
Copyright &copy: MyTodoList.com
</p>
</footer>
);
}

Step 4:- Added the todos.

src\App.js

import AddTodo from './MyComponents/AddTodo';
import React, { useState } from 'react';

function App() {
//add the todo
const addTodo = (title, desc) => {
console.log('I am adding this todo', title , desc);
let sno;
if(todoList.length === 0) {
sno = 0;
}
else{
sno = todoList[todoList.length-1].sno + 1;
}
// console.log(sno);
const myTodo = {
sno: sno,
title: title,
desc: desc,
}
setTodos([...todoList, myTodo])
// console.log(myTodo);
}
const [todoList, setTodos] = useState([
{
sno: 1,
title: "Go to the market",
desc: "You need to go the market to get this job done"
},
{
sno: 2,
title: "Go to the ground",
desc: "You need to go the market to get this job done2"
},
{
sno: 3,
title: "Go to the mall",
desc: "You need to go the market to get this job done3"
},
]);
return (
<>
<AddTodo addTodo= {addTodo}/>
</>
);
}
export default App;

src\MyComponents\AddTodo.js

import React, { useState } from 'react';

export default function AddTodo(props) {

const [title, setTitle] = useState('');

const [Desc, setDesc] = useState('');

// const submit = (e) => {

// alert('button call when click on submit button');

// }

const submit = (e) => {

e.preventDefault();

if(!title || !Desc) {

alert('Title and Description can not be bank');

}else{

props.addTodo(title,Desc);

setTitle('');

setDesc('');

}

return (

<label htmlFor="title" className="form-label">Todo Title</label>

<input type="text" value={title} onChange={(e)=>setTitle(e.target.value)} className="form-control" id="title" aria-describedby="titleHelp" />

</div>

<label htmlFor="desc" className="form-label">Todo Description</label>

<input type="text" value={Desc} onChange={(e)=>setDesc(e.target.value)} className="form-control" id="desc"/>

</div>

</form>

</div>

);

}

Notes:- Replace the attribute in React

class -> className
for -> htmlFor

Step 5:- For routing using React Router.

Step 1:- Now working on navigation menu name is About Page.

Step 2: We need to install React Router DOM through the command.

C:\xampp\htdocs\React-pro\todos-list> npm install react-router-dom

See the tutorial clickHere

Step 3: Routing add

src\App.js

import React from 'react';

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

return (

<Header title="MY Todos List" searchBar={true}/> {Need header on top}

<Route exact path="/" render={() =>{

return (

</>

)

}}>

</Route>

</Route>

{myName}

</Route>

</Switch>

<Footer/> {Need footer on top}

</Router>

</>

);

src\MyComponents\Header.js

import {BrowserRouter as Router, Link} from "react-router-dom";

export default function Header(props){

return (

{/* <a className="navbar-brand" href="#">{props.title}</a> */}

<Link className="navbar-brand" to="/">{props.title}</Link>

<span>{props.someText}</span>

</button>

{/* <a className="nav-link active" aria-current="page" href="#">Home</a> */}

</li>

{/* <a className="nav-link" href="#">About</a> */}

<Link className="nav-link" to="/about">About</Link>

</li>

{/* <a className="nav-link" href="#">Conatct-us</a> */}

<Link className="nav-link" to="/contact">Contact-us</Link>

</li>

</ul>

{ props.searchBar ? <form className="d-flex" role="search">

<button className="btn btn-outline-success" type="submit">Search</button>

</form>: "no search bar"}

</div>

</nav>

);

}

Step 6:- Production build.

Full code:-

\htdocs\React-pro\todos-list\public\index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
 rel="stylesheet">
  <title>Todoes List / Code with Lakhan</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
<script 
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
></script>
</body>

</html>

\htdocs\React-pro\todos-list\src\App.js

import './App.css';
import Header from './MyComponents/Header';
import {Todos} from './MyComponents/Todos';
import Footer from './MyComponents/Footer';
import AddTodo from './MyComponents/AddTodo';
import {About} from './MyComponents/About';
import React, { useState } from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

function App() {
  let myName = "Lakhan Thakur"
  const onDelete = (todo) => {
    console.log('I am On delete of todo', todo);
    setTodos(todoList.filter((e)=>{
      return e!==todo;
    }));
  }

 //add the todo
  const addTodo = (title, desc) => {
    console.log('I am adding this todo', title , desc);
    let sno;
    if(todoList.length === 0) {
      sno = 0;
    }
    else{
      sno = todoList[todoList.length-1].sno + 1;
    }
    // console.log(sno);
    const myTodo = {
      sno: sno,
      title: title,
      desc: desc,
    }
    setTodos([...todoList, myTodo])
    // console.log(myTodo);
  }

  // let todoList = [
  //   {
  //     sno: 1,
  //     title: "Go to the market",
  //     desc: "You need to go the market to get this job done"
  //   },
  //   {
  //     sno: 2,
  //     title: "Go to the ground",
  //     desc: "You need to go the market to get this job done2"
  //   },
  //   {
  //     sno: 3,
  //     title: "Go to the mall",
  //     desc: "You need to go the market to get this job done3"
  //   },
  // ]
  // use hook for above way todoList

  const [todoList, setTodos] = useState([
    {
      sno: 1,
      title: "Go to the market",
      desc: "You need to go the market to get this job done"
    },
    {
      sno: 2,
      title: "Go to the ground",
      desc: "You need to go the market to get this job done2"
    },
    {
      sno: 3,
      title: "Go to the mall",
      desc: "You need to go the market to get this job done3"
    },
  ]);
  return (
    <>
       <Router>
        <Header title="MY Todos List" searchBar={true}/>
        <Switch>
          <Route exact path="/" render={() =>{ 
          return (
            <>
              <AddTodo addTodo= {addTodo}/>
              <Todos todos={todoList} onDelete= {onDelete}/>
            </>
          )
          }}>
            
          </Route>
          <Route exact path="/about">
            <About />
          </Route>
          <Route exact path="/contact">
            {myName}
          </Route>
        </Switch>
        <Footer/>
    </Router>
    </>
  );
}

export default App;

\htdocs\React-pro\todos-list\src\MyComponents\Header.js

import React from "react";

import PropTypes from 'prop-types';

import {

  BrowserRouter as Router,

  Link

} from "react-router-dom";

export default function Header(props){

    return (

        <nav className="navbar navbar-expand-lg bg-body-tertiary">

        <div className="container-fluid">

          {/* <a className="navbar-brand" href="#">{props.title}</a> */}

          <Link className="navbar-brand" to="/">{props.title}</Link>

          <span>{props.someText}</span>

          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" 

data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"

 aria-expanded="false" aria-label="Toggle navigation">

            <span className="navbar-toggler-icon"></span>

          </button>

          <div className="collapse navbar-collapse" id="navbarSupportedContent">

            <ul className="navbar-nav me-auto mb-2 mb-lg-0">

              <li className="nav-item">

         {/* <a className="nav-link active" aria-current="page" href="#">Home</a> */}

                <Link className="navbar-brand" to="/">Home</Link>

              </li>

              <li className="nav-item">

                {/* <a className="nav-link" href="#">About</a> */}

                <Link className="nav-link" to="/about">About</Link>

              </li>

               <li className="nav-item">

                {/* <a className="nav-link" href="#">About</a> */}

                <Link className="nav-link" to="/contact">Contact-us</Link>

              </li>

            </ul>

            { props.searchBar ? <form className="d-flex" role="search">

              <input className="form-control me-2" type="search"

 placeholder="Search" aria-label="Search" />

             <button className="btn btn-outline-success" type="submit">Search</button>

            </form>: "no search bar"}

          </div>

        </div>

      </nav>

);

}

Header.defaultProps = {

  title: "Your Title Here",

  searchBar: true,

  someText: "Given text"

}

Header.ProtTypes = {

  title: PropTypes.string,

  searchBar: PropTypes.bool.isRequired

}

\htdocs\React-pro\todos-list\src\MyComponents\Footer.js

import React from "react";

export default function Footer(){
    // let footerStyle = {
    //     position: "absolute",
    //     top: "100vh",
    //     width: "100%",
    // }
    return (
        // <footer className="bg-dark text-light py-3" style={footerStyle}>
        <footer className="bg-dark text-light py-3">
           <p className="text-center">
            Copyright &copy: MyTodoList.com
           </p>
        </footer>
    );

}

\htdocs\React-pro\todos-list\src\MyComponents\Todos.js

import React from "react";
import TodoItem from "../MyComponents/TodoItem";

// export default function Todos(){
//     return(
//         <div>Todos</div>
//     );
// }
export const Todos = (props) => {

    let myStyle = {
        minHeight: '70vh',
        margin: '40px auto',
    }
    return(

        <div className="container" style={myStyle}>
            <h3 className="my-3">Todos List</h3>
            { props.todos.length===0?"No Todos to display" :
                props.todos.map((todo)=>{
                    return <TodoItem todoList={todo} key={todo.sno} onDelete={props.onDelete}/>
                })
            }

            {/* we pass the mor data */}
            {/* {props.todos.map((todo)=>{
                return (
                    <>
                    <h3>This is test</h3>
                    <TodoItem todoList={todo}/>
                    </>
                )
            })} */}

        </div>
    );
}

\htdocs\React-pro\todos-list\src\MyComponents\TodoItem.js

import React from "react";

export default function TodoItem({todoList, onDelete}){
    return(
        <div>
            <h4>{todoList.title}</h4>
            <h4>{todoList.desc}</h4>
            <button className="btn btn-sm btn-danger" onClick={()=>{onDelete(todoList)}}>Delete</button>
        </div>
        
    );
}

\htdocs\React-pro\todos-list\src\MyComponents\AddTodo.js

import React, { useState } from 'react';

export default function AddTodo(props) {
    const [title, setTitle] = useState('');
    const [Desc, setDesc] = useState('');

    // const submit = (e) => {
    //     alert('button call when click on submit button');
    // }
    const submit = (e) => {
        e.preventDefault();
        if(!title || !Desc) {
            alert('Title and Description can not be bank');
        }else{
            props.addTodo(title,Desc);
            setTitle('');
            setDesc('');
        }
        
    }

    return (
        <div className="container my-3">
            <h3>Add a Todo</h3>
            <form onSubmit={submit}>
                <div className="mb-3">
                    <label htmlFor="title" className="form-label">Todo Title</label>
                    <input type="text" value={title} onChange={(e)=>setTitle(e.target.value)} className="form-control" id="title" aria-describedby="titleHelp" />
                </div>
                <div className="mb-3">
                    <label htmlFor="desc" className="form-label">Todo Description</label>
                    <input type="text" value={Desc} onChange={(e)=>setDesc(e.target.value)} className="form-control" id="desc"/>
                </div>
               
                <button type="submit" className="btn btm-sm btn-success">Add Todo</button>
            </form>
        </div>
    );

}

\htdocs\React-pro\todos-list\src\MyComponents\About.js

import React from "react";

export const About = () => {
    return(
        <div>
            This is a About us page
            <p>Let me know your React version, and I can confirm the exact version you should install.</p>
        </div>
    );
}

Wednesday, July 9, 2025

Todos List in React

Step 3:- Added the inline style.

Step 4:- Added the todos.

Step 5:- For routing using React Router.

Step 2: We need to install React Router DOM through the command.

C:\xampp\htdocs\React-pro\todos-list> npm install react-router-dom

Step 3: Routing add

src\MyComponents\Header.js

Step 6:- Production build.

No comments:

Post a Comment

Follow Us

Facebook

Blog Archive

Recent Post

Tags

Popular

Wednesday, July 9, 2025

Todos List in React

Step 3:- Added the inline style.

Step 4:- Added the todos.

Step 5:- For routing using React Router.

Step 2: We need to install React Router DOM through the command.

C:\xampp\htdocs\React-pro\todos-list> npm install react-router-dom

Step 3: Routing add

src\MyComponents\Header.js

Step 6:- Production build.

Related Posts:

No comments:

Post a Comment

Follow Us

Facebook

Blog Archive

Recent Post

Tags

Popular