Scribd
Upload
38 views8 pages

WT Assignment 6

This document contains code for a React Todo list application. It includes code for the App component which manages state and passing of props. It also includes separate component files for the Header, AddTasks, Todo, TodoItems, and Footer components. The App component manages state with useState hooks and passes data and functions to child components as needed via props.

Uploaded by

om.lohade23
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
38 views8 pages

WT Assignment 6

This document contains code for a React Todo list application. It includes code for the App component which manages state and passing of props. It also includes separate component files for the Header, AddTasks, Todo, TodoItems, and Footer components. The App component manages state with useState hooks and passes data and functions to child components as needed via props.

Uploaded by

om.lohade23
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Name – Lohade Om Manoj

Roll No- Seda IT C - 3


App.js File :
// import logo from './logo.svg';
import './App.css';
import Header from "./MyComponents/Header";
import Todo from "./MyComponents/Todo";
import Footer from './MyComponents/Footer';
import AddTasks from './MyComponents/AddTasks';
import React, {useState} from 'react';

function App() {

const onDelete = (td)=>{


console.log("I am on delete!",td.sno);
setTodos(todoslist.filter((e)=>{
return e!==td;
}))
}

const AddTodo = (title, desc) => {


console.log(title,desc)
let sno;
if (todoslist.length==0) {
sno = 0
}
else{
sno = todoslist[todoslist.length-1].sno+1;
}
const mytodo = {
sno:sno,
title:title,
desc:desc
}
setTodos([...todoslist,mytodo])
console.log(mytodo)
}

const [todoslist, setTodos] = useState([

]);

return (
<>
<Header title="Todo's List" search={false} />
<AddTasks AddTodo={AddTodo}/>
<Todo todoss={todoslist} onDelete={onDelete}/>
<Footer />
</>
);
}

export default App;

Header.js File

//There are two types of components - function and class components


//This is a react function component
//Type rfc and click enter, extension is installed, u will get snippit.

import React from 'react'


import PropTypes from 'prop-types'

export default function Header(props) {


return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<a className="navbar-brand" href="/">{props.title}</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-
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 mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-
only">(current)</span></a>
</li>

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

</ul>
{props.search ? <form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="search" placeholder="Search" aria-
label="Search"/>
<button className="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form> : ""}
</div>
</nav>
)
}

Header.defaultProps = {
title:"Your Title",
search:true,
}

Header.propTypes = {
title:PropTypes.string,
search:PropTypes.bool.isRequired,
}

AddTasks.js File

import React, {useState} from 'react';

const AddTasks = ({AddTodo}) => {


const [title, setTitle] = useState("");
const [desc, setDesc] = useState("");

const submit=(e)=>{
e.preventDefault();
if(!title || !desc){
alert("Title or description cannot be blank!")
}
AddTodo(title,desc);
}
return (
<div className='container'>
<h3 className='text-center my-2'>- Add a Task -</h3>
<form onSubmit={submit}>
<div class="form-group">
<label for="title">Todo Title :</label>
<input type="text" value={title}
onChange={(e)=>{setTitle(e.target.value)}} class="form-control" id="title" aria-
describedby="emailHelp" placeholder="Enter Todo Title"/>

</div>
<div class="form-group">
<label for="desc">Description :</label>
<input type="text" value={desc}
onChange={(e)=>{setDesc(e.target.value)}} class="form-control" id="desc"
placeholder="Description"/>
</div>
<button type="submit" class="btn btn-sm btn-primary">Add Todo</button>
</form>
</div>
)
}

export default AddTasks

Todo.js File

import React from 'react';


import TodoItems from './TodoItems'

const Todo = (props) => {


let mystyle={
minHeight:"70vh"
}
return (
<div className='container' style={mystyle}>
<h3 className='text-center my-3'>- Todo's List -</h3>
{props.todoss.length===0?<h5>No Todo's to Display</h5>:
props.todoss.map((todo)=>{
return(
<>
<TodoItems td={todo} onDelete={props.onDelete}/> <hr/>
</>
)
})
}
</div>
)
}

export default Todo

TodoItems.js File

import React from 'react'

const TodoItems = ({td,onDelete}) => {


return (
<div className='my-4'>
<h4>{td.title}</h4>
<p>{td.desc}</p>
<button className="btn btn-sm btn-danger"
onClick={()=>{onDelete(td)}}>Delete</button>
</div>
)
}

export default TodoItems

Footer.js File

//This is a rafc component...


//react arrow function component

import React from 'react'

const Footer = () => {

return (
<div className='bg-dark text-light mb-0 mt-2' >
<p className="text-center py-3">
Copyright &copy; MyTodosList.com
</p>

</div>
)
}

export default Footer

OUTPUT :

1) Initial page After Entry.


2) Writing the Todo

3) First Todo Created


4) Deleting the Todo

5) Creating another Todo

You might also like