Building a Todo List App Project with Local Storage in React JS & Hooks in 2021

Hope you all love the video ❤️
Plz LIKE SHARE SUBSRIBE my Channel for daily Awesome Vidoe 🙏

Broooo, you are awesomeee. Thankyou so much

wowwwwww it worksss

can anyone tell me why we have written getItem function outside the Todo function ??

Sir, I am not able to access the source code.

Thanks!!

Thankss bhaiiii , it workssss

source code is not free . he is asking money

in the first you start good and clear after that the english wich none understand start

very helpful

very good videos, love it. but the line" the boom guys is epic :)

subscrib ke liye bhik mat managa kijye samjhe

..dhsbdjnf

no sorce code in vedio description

thank you bro

Thank you got a knowledge....

nice thapa bro

Thapa bhiya....local storage in setdata multiple key value pair me kaise store kare

Make video on front end jobs 👍

thank apse mene react shikrahah hu mere ko bohot accha lagta hee

thanks thapa sirr

Abe yrr tu source code GitHub pr dala kar naa tere website pe ek toh add itne hai or milta kuch nhi hai 😑😑😑

Is there any way store a default values permanently which will not loss when browser closed

All ok, but you start video is late..

Entendi nada que falou, mas me ajudou muito pra conseguir persistir os dados ao atualizar a página no meu projeto!

Hello thappa bhai please muja help karo aa esma i need code by using html and boostrap

Form with 2 inputs form controls and a button
*. Date Time Picker
*. Todo Item

*. Add Button

On clicking Add Button, validate whether date/time field and todo Item field
are populated
if not, throw an alert popup saying, "required fields are missing"
if yes, append the item to the bootstrap list-group

you save my day ❤

awesome explaination

This video is really helpful❤️❤️❤️

I loved this video

you are awesome sir

thank you so much for this!! <3

@Thapa Technical Please make a video on "how to preserve state while using Redux". Thank you for your all efforts, your teaching is amazing:)

Pls help my code stucked here as error "ReferenceError: localStorage is not defined" i tried to write same code in Next.js only this local storage getItem is not working???

import { useState, useEffect } from 'react';
import Image from 'next/image';

//To get the items from local storage
const getLocalItems = () => {
let todoList = JSON.parse(localStorage.getItem('Todos'));
console.log(todoList);
if (todoList) {
return JSON.parse(localStorage.getItem('Todos'));
} else {
return [];
}
}

const Todo = () => {
const [inputData, setInputData] = useState('');
//here my code stucks if i pass localstoarge getItem which is inside of getLocalItems function in below useState of setItems instead empty arry

const [items, setItems] = useState([]);


const addItem = () => {
if (inputData) {
setItems([...items, inputData]);
setInputData('');
} else {
return alert('No Data to add');
}
}

const deleteItem = (id) => {
console.log(id);
const updateditems = items.filter((ele, ind) => {
return ind !== id;
});

setItems(updateditems);
}

const removeAll = () => {
setItems([]);
}

//adding data to local storage
useEffect(() => {
localStorage.setItem('Todos', JSON.stringify(items));
}, [items])


return (
<>
<div className="main-div">
<div className='child-div'>
<figure>
<Image src='/todo.svg' alt="Picture of the author" width={150} height={150} />
<figcaption>Add Your List Here 🔥</figcaption>
</figure>

<div className='addItems'>
<input type="text" placeholder="Add Item.... 🙌" value={inputData} onChange={(e) => setInputData(e.target.value)} />
<i className="fa fa-plus add-btn" title="Add Item" onClick={addItem}></i>
</div>

<div className='showItems'>
{items.map((ele, ind) =>
<div className='eachItem' key={ind}>
<h3>{ele}</h3>
<i className="fas fa-trash-alt add-btn" title="Delete Item" onClick={() => deleteItem(ind)}></i>
</div>
)}
</div>

<div className='showItems'>
<button className='btn effect04' data-sm-link-text='Remove All' onClick={removeAll}><span>CHECK LIST</span></button>
</div>
</div>
</div>
</>
)
}

export default Todo;

😀😀😀😀😀

There is no code is this a scam

He told free source code in video
But he asked 50rs for source code in portfolio website
He is pachas rupee mental

Ek video react-redux with localStorage pls sir

i love u sir

File download link?

Thank you so much for such a wonderful video but i am having one doubt, refresh krne me data is not going but react first time open kro toh saved data bhi chala jata hai in that case what should we do ki saved data delete na ho? Please help

i am big fan sar

Thank u so much❤️

Congratulations on 400K ✌

Hello! Thanks for your video, i didnt undestand what you said but i coud understand your code!
Really thank you for talking your time, this helped me a lot!

thank you sir