Wednesday, July 9, 2025

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/>
    </>
  );
}

Header.js

import 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:-

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 (
        <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 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(
        <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.)
    let footerStyle = {
        position: "absolute",
        top: "100vh",
        width: "100%",
    }
    return (
        <footer className="bg-dark text-light py-3" style={footerStyle}>
           <p className="text-center">
            Copyright &copy: MyTodoList.com
           </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 (
        <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

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 (
    <>
       <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.


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>
    );
}

No comments:

Post a Comment

If you have any problem please let me know.