Steps to Complete the Todo List Project.
Note:- Replace the class to classname.
Step 1:- Header file work
import React from "react";

import React from "react";
default Props:-

Header.js
Step 2:- To-dos file work
src/MyComponents/Todos.js
If you're not using
Step 1:- Added the array in App.js File
Step 2:- Deleted Action added in App.js File
Step a:- Button calling
App.js
Step 1: Use Bootstrap

Step 2: - Bootstrap HTML add inside the app.js file.
- 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)
(Bootstrap HTML)
< />
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.jsimport Header from './MyComponents/Header';
function App() {
return (
<>
<Header/>
</>
);
}
Header.jsimport React from "react";
export default function Header(){
return (
<nav className="navbar navbar-expand-lg bg-body-tertiary">
<div className="container-fluid">
<a className="navbar-brand" href="#">Todos List</a>
<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>
</li>
<li className="nav-item">
<a className="nav-link" href="#">About</a>
</li>
</ul>
<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>
</div>
</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:-
Condition through the props:-
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>
);
}

Header.js
import React from "react";
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>
<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>
</li>
<li className="nav-item">
<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>
</div>
</nav>
);
}
App.js
function App() {
return (
<>
{/* Use the new file src/MyComponents/Header.js */}
<Header title="MY Todos List" searchBar={true}/>
</>
);
}
default Props:-

Header.js
import React from "react";
import PropTypes from 'prop-types';
export default function Header(props){
return (
<nav className="navbar navbar-expand-lg bg-body-tertiary">
<nav className="navbar navbar-expand-lg bg-body-tertiary">
<div className="container-fluid">
<a className="navbar-brand" href="#">{props.title}</a>
<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>
</li>
<li className="nav-item">
<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>
</div>
</nav>
</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 */}
<Header searchBar={false}/>
</>
);
}
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
fileimport {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;
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]}/>
export const Todos = (props) => {
{props.todos.map((todo)=>{
Step 3: Return the array of todos using a loop and add an extra argument.
export const Todos = (props) => {
{props.todos.map((todo)=>{
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
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
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;
Todos.js
import TodoItem from "../MyComponents/TodoItem";
export const Todos = (props) => {
return(
<div className="container">
<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.)
(Created one object and let's the variable.)
let footerStyle = {
position: "absolute",
top: "100vh",
width: "100%",
}
return (
<footer className="bg-dark text-light py-3" style={footerStyle}>
<p className="text-center">
Copyright ©: MyTodoList.com
</p>
</footer>
);
}
Step 4:- Added the style file.
src/MyComponents/add.css
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 ©: 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 (
<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>
);
}
Notes:- Replace the attribute in React
class -> className
for -> htmlFor
Notes:- Replace the attribute in React
class -> className
for -> htmlFor
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\App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
return (
<>
<Router>
<Header title="MY Todos List" searchBar={true}/> {Need header on top}
<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/> {Need footer on top}
</Router>
</>
);
src\MyComponents\Header.js
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="#">Conatct-us</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>
);
}
Step 6:- Production build.
\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 ©: 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>
);
}
No comments:
Post a Comment
If you have any problem please let me know.