00:01 Creating a todo list app using React 01:49 Creating TodoList app using React, Tailwind, and React Icons 05:53 Creating a simple app for better understanding 08:34 Creating a TodoList app using flexbox and classes 12:33 Customizing color and duration for animations 14:25 Creating a todo list app using React 18:06 Creating buttons and adding styling 20:04 Styling and formatting elements using Tailwind classes 23:41 Handling add, delete, and edit functions in the TodoList app 25:31 Creating a TodoList app using React, Tailwind, and React Icons 29:07 Implementing strike through feature for to-do items 30:58 Styling flex items using Tailwind classes 34:27 Handling checkbox events and updating todo items 36:29 Implementing toggling functionality for todo items 40:38 Debugging and troubleshooting in React app development 42:26 Understanding the state and re-rendering in the TodoList app 45:53 Implementing delete functionality and user confirmation 47:38 Creating, editing, and updating to-dos in the TodoList app. 51:28 Implementing auto-update feature on save 53:11 Managing todo list using local storage and useEffect in React 57:25 Creating and managing a to-do list using React and storage 59:16 Implementing the 'Show Finished' feature 1:03:16 Conditional rendering based on completion status 1:04:47 Setting up the width and appearance of the Save button 1:08:39 Using React Icons for adding and customizing icons 1:10:33 Customize font and size for TodoList app 1:14:12 Customize the appearance and layout of the TodoList App 1:15:53 Styling the save button in the TodoList app using flexbox and Tailwind CSS classes. 1:19:09 Customizing the appearance of a div element using CSS properties 1:21:19 Creating a customizable TodoList App using React, Tailwind, and React Icons Crafted by AI.
Harry bro this course is more better then every paid course I’m form Pakistan and I join a government paid course and they not say anything thing about flex box and more😢 bro your really OP❤❤ thanks for such a heavy course and I also downloaded all the video ❤❤❤❤
hey harry bhai , I think there is one problem when we write todos and reload the page last todo will automatically get removed but if we maked it finished by checkbox then last todo didnt get removed i think it because when we console log todos the last todo dont showsup
Actually the thing is :- to optimise performance REACT tries to minimise re-renders, so within the callback function given to onclick handlers, when you change state using a setstate() function, the state is not actually changed immediately, it is changed when the block of code in which it is being changed gets completely executed. but you might be saving the todolist within the block itself. so basically the save() function is being called before the setstate() function is executed. If you want to check for urself, write{console.log(todos)} just before the saving function. If the setstate() and save() function are in same block. the change will not be reflected in the console.log().
I was getting the same problem, I used useEffect whenever there is a change in Todos array Here is the whole code: import { useEffect, useState } from 'react' import './App.css' import Navbar from './assets/components/Navbar' import { MdEdit } from "react-icons/md"; import { MdDelete } from "react-icons/md"; import { v4 as uuidv4 } from 'uuid'; // OR // const { v4: uuidv4 } = require('uuid'); function App() { const [todos, setTodos] = useState([]) // array of all todos const [todo, setTodo] = useState("") // single todo const [showFinished, setshowFinished] = useState(true) // At the begining to load the saved ToDos from local storage useEffect(() => { let todoString = localStorage.getItem("todos") // console.log("Get todos"); // console.log(todoString); if (todoString) { let todos = JSON.parse(localStorage.getItem("todos")) setTodos(todos) } }, []) // Called whenever todos array is changed useEffect(() => { // console.log("Todos changed"); saveToLS() }, [todos]); const saveToLS = () => { localStorage.setItem("todos", JSON.stringify(todos)) } const handleAdd = () => { if (todo == "") { // empty todo return } setTodos([...todos, { id: uuidv4(), todo, isCompleted: false }]) // add the todo as an object setTodo("") // reset the input field console.log(todos); // saveToLS() } const handleEdit = (e, id) => { let newTodo = todos.filter(item => item.id == id) setTodo(newTodo[0].todo) let newTodos = todos.filter(item => item.id !== id) // get all the todos except the button clicked setTodos(newTodos) // saveToLS() } const handleDelete = (e, id) => { let newTodos = todos.filter(item => item.id !== id) // get all the todos except the button clicked setTodos(newTodos) // saveToLS() } const handleChange = (e) => { setTodo(e.target.value) } const handleCheckbox = (e) => { // get index of the todo and change the isCompleted value let id = e.target.name; let index = todos.findIndex(item => item.id == id) let newTodos = [...todos] newTodos[index].isCompleted = !newTodos[index].isCompleted; setTodos(newTodos) saveToLS() } const toggleFinished = () => { setshowFinished(!showFinished) } return (
Add
Show Finished Your To-Do List {todos.length == 0 && No To dos to display...} {todos.map(item => { return (showFinished || !item.isCompleted) &&
@@murariram2881 Run the saving function by using Useeffect hook, and set the useeffect hook dependency to the 'todolist', so whenever the todolist is modified after the re-render, useeffect hook will be fired. Ex:- useEffect(()=>{ savefunction() }, [todolist])
here the last todo is not saved in the local storage please help what i change in code code is same i write like code of source code i just copy and paste
@@pankajkumarpatel3160 i was searching for this if anyone got this bug or not we have to use the useEffect hook for changes in the todos state and then save the updated state to local storage. As state updates in react are async, that is why the last todo is not getting updated. after using useEffect to save in the local storage it will work fine
here the last todo is not saved in the local storage please help what i change in code code is same i write like code of source code i just copy and paste\
@@pankajkumarpatel3160 you can use use effect hook with dependency in this case but you have to handle some conditions for some other operations also you can do it by using href hook by making a variable and it will work
Local Storage is not getting updated with new values. It is storing old value. You are putting the local storage saving function to execute instead of letting React 's state updates' asynchronous nature complete.
@@microsoftian Yes. For localstorage to wor properly add a function in useState like this: useState(()=>{localStorage.getItem()}). And in useEffect setItem with tasks in dependency array like this [tasks] .
hi, you can try this code. I think its working in here. import { useEffect, useState } from 'react' import './App.css' import Navbar from './assets/components/Navbar' import { MdEdit } from "react-icons/md"; import { MdDelete } from "react-icons/md"; import { v4 as uuidv4 } from 'uuid'; // OR // const { v4: uuidv4 } = require('uuid'); function App() { const [todos, setTodos] = useState([]) // array of all todos const [todo, setTodo] = useState("") // single todo const [showFinished, setshowFinished] = useState(true) // At the begining to load the saved ToDos from local storage useEffect(() => { let todoString = localStorage.getItem("todos") // console.log("Get todos"); // console.log(todoString); if (todoString) { let todos = JSON.parse(localStorage.getItem("todos")) setTodos(todos) } }, []) // Called whenever todos array is changed useEffect(() => { // console.log("Todos changed"); saveToLS() }, [todos]); const saveToLS = () => { localStorage.setItem("todos", JSON.stringify(todos)) } const handleAdd = () => { if (todo == "") { // empty todo return } setTodos([...todos, { id: uuidv4(), todo, isCompleted: false }]) // add the todo as an object setTodo("") // reset the input field console.log(todos); // saveToLS() } const handleEdit = (e, id) => { let newTodo = todos.filter(item => item.id == id) setTodo(newTodo[0].todo) let newTodos = todos.filter(item => item.id !== id) // get all the todos except the button clicked setTodos(newTodos) // saveToLS() } const handleDelete = (e, id) => { let newTodos = todos.filter(item => item.id !== id) // get all the todos except the button clicked setTodos(newTodos) // saveToLS() } const handleChange = (e) => { setTodo(e.target.value) } const handleCheckbox = (e) => { // get index of the todo and change the isCompleted value let id = e.target.name; let index = todos.findIndex(item => item.id == id) let newTodos = [...todos] newTodos[index].isCompleted = !newTodos[index].isCompleted; setTodos(newTodos) saveToLS() } const toggleFinished = () => { setshowFinished(!showFinished) } return (
Add
Show Finished Your To-Do List {todos.length == 0 && No To dos to display...} {todos.map(item => { return (showFinished || !item.isCompleted) &&
warn - The `content` option in your Tailwind CSS configuration is missing or empty. warn - The `content` option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. bhai mere me ye error araha hai hamesa me sab aap jaise bataye waisehi kiya hu lekin fir bhi aisa hi araha hai hamesa plz meri madat karo me pareshan hogaya hu solutions search kar karke
On handleAdd part the saveToLS doesn't work I also compared my code with github code and still can't find where the problem is I checked letter to letter to see if I did something wrong but it doesn't seem like that
#SigmaBatchOP I am getting an error on this, even that I have written the same as shown in the video can anyone please help me why this is not running. const handleEdit = (e, id) => { let t = todos.filter((i) => i.id === id); setTodo(t[0].todo); let newtodos = todos.filter((item) => { return item.id !== id; }); setTodos(newtodos); };
const handleEdit = (e, id) => { let index = todos.filter((i) => { return i.id === id }) setTodo(index[0].todo) let newTodos = todos.filter((item) => { return item.id !== id }) setTodos(newTodos) } Bro, i also facing the error in handleEdit function but when i use "return i.id === id ", my error resolved. Use my above code
Harry bhai mhujha flutter ata hai kya mhugha recact js ko shikna chaye ya phir mhuje flutter ko or depth mai cikhna chaye? This is my question please pick and i am your follower and student ❤❤❤
flutter -android /ios app mobile development hai , react js - website , web application ke frontend ke liye use hota hai , dono technology bilkul alag hai agar tum frontend developer ban jana chahte ho toh seekho warna mat seekho
@CodeWithHarry A small Bug is when we save it in local storage after deletion we probably get jumped to the saveToLS function and the previous state is saved in which the element is still not deleted Please add something for this
here the last todo is not saved in the local storage please help what i change in code code is same i write like code of source code i just copy and paste
is this a paid comment section there are no doubts , only just appreciations but I have a doubt When you made "Save to local storage" function it saved the todos in local storage but when you are adding a todo in todos which is done asynchronusly In my pc todos are save in localStorage before adding the data
Last item does'nt get deleted. what to do? solution: Remove the reactStrickMode wrapper from the app and the data will remain saved in your device. It took 2 hours to find out.
i am getting an error anyone here who could help me the error is that the last save or last edit or last delete is not saving means if i add two sentence to my todo the first one will be saved to local storage but the second one gets lost when i refresh the page please help #error #sigma #harry
@@SahilLokhande-w6y i got it first while handing handleAdd make a variable there in which you have to store the result of todos like this const updatedTodo = [...todos, {id and todo here }] then pass this updatedTodo to saveTodo like this SaveTodo(updatedTodo) Also receive this updatedTodo in saveTodo and use this updatedTodo with local storage
@@SahilLokhande-w6y if you getting an error that the last time you save ,edit,delete the note. is not saving . then try to add this code useEffect(() => { savetoLs(); })
I am having a problem here, after deleting or editing a todo then if I refresh the todo comes back(it happens with only the last deleted/edited/added todo only)
state is asynchronous so when we save the todos in local storage the last action is not recorded and when we open it in new windows the last action not visible so the redux tool comes
I posted this issue recently, and also fixed it... You can check it on Sigma Dev repository. It is fixed using only the stuff taught uptill now. Short form of solution - instead of using a save to LS function... Use "Use effect" to always track change in the list/array
@@ankyie7544 bro listen harry redux video is so basic, i think we have to explore on youtube and i think so chai aur code has very theory based video if want knowledge than u can follow that or just explore by yourself
hello harry bhai can you tell that how can we remove todos that are now completed but when we are clicking on show finished we are getting both completed as well as not completed so is there any idea to only show the completed one when we click on show finished ? also if anyone knows please do share. thankyou!!
00:01 Creating a todo list app using React
01:49 Creating TodoList app using React, Tailwind, and React Icons
05:53 Creating a simple app for better understanding
08:34 Creating a TodoList app using flexbox and classes
12:33 Customizing color and duration for animations
14:25 Creating a todo list app using React
18:06 Creating buttons and adding styling
20:04 Styling and formatting elements using Tailwind classes
23:41 Handling add, delete, and edit functions in the TodoList app
25:31 Creating a TodoList app using React, Tailwind, and React Icons
29:07 Implementing strike through feature for to-do items
30:58 Styling flex items using Tailwind classes
34:27 Handling checkbox events and updating todo items
36:29 Implementing toggling functionality for todo items
40:38 Debugging and troubleshooting in React app development
42:26 Understanding the state and re-rendering in the TodoList app
45:53 Implementing delete functionality and user confirmation
47:38 Creating, editing, and updating to-dos in the TodoList app.
51:28 Implementing auto-update feature on save
53:11 Managing todo list using local storage and useEffect in React
57:25 Creating and managing a to-do list using React and storage
59:16 Implementing the 'Show Finished' feature
1:03:16 Conditional rendering based on completion status
1:04:47 Setting up the width and appearance of the Save button
1:08:39 Using React Icons for adding and customizing icons
1:10:33 Customize font and size for TodoList app
1:14:12 Customize the appearance and layout of the TodoList App
1:15:53 Styling the save button in the TodoList app using flexbox and Tailwind CSS classes.
1:19:09 Customizing the appearance of a div element using CSS properties
1:21:19 Creating a customizable TodoList App using React, Tailwind, and React Icons
Crafted by AI.
Thanks bro, love u
Thank you ❤🎉
@@ragnarnub9836 Your welcome 🤗
Harry Bhai Maja aagaya project banake
Mushkil cheejenko bahut aasan bana dete Harry Bhai tum
🙌🙌🙌🙌🙌
Done!
Mera to deemag ghum gaya tha but Alhamdulilah complete hogaya.
thanks, Haris bhai for this amazing course
#SigmaBatchOp #ReactOp
Please fix bros name 😭
im amazed by your expertise , i think i cant do coding but you help me to reach out my potential , thanks harry bhai
no
Harry bro this course is more better then every paid course I’m form Pakistan and I join a government paid course and they not say anything thing about flex box and more😢 bro your really OP❤❤ thanks for such a heavy course and I also downloaded all the video ❤❤❤❤
mia pakistan me ye sab padhate bhi h chutiya mat banaiye aap waha sirf madarso me brain wash karke jihadi banaya jaata hai
Pakistan me hota toh tere pass internet ke paise ni hote
pakistan me website chalti hai😂
Mujhe purana shuru ka time aad aa gaya realy you has raised the bar.
No one can beat harry Bhai ❤.Love from Pakistan
Patharbaaz
It was difficult in the start but finally made it in a single day 😌
hey harry bhai ,
I think there is one problem when we write todos and reload the page last todo will automatically get removed
but if we maked it finished by checkbox then last todo didnt get removed
i think it because when we console log todos the last todo dont showsup
bro check your code properly I think you made some mistake
Actually the thing is :- to optimise performance REACT tries to minimise re-renders, so within the callback function given to onclick handlers, when you change state using a setstate() function, the state is not actually changed immediately, it is changed when the block of code in which it is being changed gets completely executed. but you might be saving the todolist within the block itself. so basically the save() function is being called before the setstate() function is executed.
If you want to check for urself, write{console.log(todos)} just before the saving function. If the setstate() and save() function are in same block. the change will not be reflected in the console.log().
I was getting the same problem, I used useEffect whenever there is a change in Todos array
Here is the whole code:
import { useEffect, useState } from 'react'
import './App.css'
import Navbar from './assets/components/Navbar'
import { MdEdit } from "react-icons/md";
import { MdDelete } from "react-icons/md";
import { v4 as uuidv4 } from 'uuid';
// OR
// const { v4: uuidv4 } = require('uuid');
function App() {
const [todos, setTodos] = useState([]) // array of all todos
const [todo, setTodo] = useState("") // single todo
const [showFinished, setshowFinished] = useState(true)
// At the begining to load the saved ToDos from local storage
useEffect(() => {
let todoString = localStorage.getItem("todos")
// console.log("Get todos");
// console.log(todoString);
if (todoString) {
let todos = JSON.parse(localStorage.getItem("todos"))
setTodos(todos)
}
}, [])
// Called whenever todos array is changed
useEffect(() => {
// console.log("Todos changed");
saveToLS()
}, [todos]);
const saveToLS = () => {
localStorage.setItem("todos", JSON.stringify(todos))
}
const handleAdd = () => {
if (todo == "") { // empty todo
return
}
setTodos([...todos, { id: uuidv4(), todo, isCompleted: false }]) // add the todo as an object
setTodo("") // reset the input field
console.log(todos);
// saveToLS()
}
const handleEdit = (e, id) => {
let newTodo = todos.filter(item => item.id == id)
setTodo(newTodo[0].todo)
let newTodos = todos.filter(item => item.id !== id) // get all the todos except the button clicked
setTodos(newTodos)
// saveToLS()
}
const handleDelete = (e, id) => {
let newTodos = todos.filter(item => item.id !== id) // get all the todos except the button clicked
setTodos(newTodos)
// saveToLS()
}
const handleChange = (e) => {
setTodo(e.target.value)
}
const handleCheckbox = (e) => {
// get index of the todo and change the isCompleted value
let id = e.target.name;
let index = todos.findIndex(item => item.id == id)
let newTodos = [...todos]
newTodos[index].isCompleted = !newTodos[index].isCompleted;
setTodos(newTodos)
saveToLS()
}
const toggleFinished = () => {
setshowFinished(!showFinished)
}
return (
Add
Show Finished
Your To-Do List
{todos.length == 0 && No To dos to display...}
{todos.map(item => {
return (showFinished || !item.isCompleted) &&
{item.todo}
handleEdit(e, item.id)} className='btn bg-[#222222]'>
handleDelete(e, item.id)} className='btn bg-[#222222]'>
})}
)
}
export default App
@@whitemask-Community I understood what u r saying but how to fix it
@@murariram2881 Run the saving function by using Useeffect hook, and set the useeffect hook dependency to the 'todolist', so whenever the todolist is modified after the re-render, useeffect hook will be fired.
Ex:-
useEffect(()=>{
savefunction()
}, [todolist])
Sir keep it up , jo serious hain web development ko lay kay un k he views hain
here the last todo is not saved in the local storage please help what i change in code code is same i write like code of source code i just copy and paste
@@pankajkumarpatel3160 i was searching for this if anyone got this bug or not
we have to use the useEffect hook for changes in the todos state and then save the updated state to local storage. As state updates in react are async, that is why the last todo is not getting updated. after using useEffect to save in the local storage it will work fine
i've learned so many important aspects of react app from this project. it deserves a rating beyond 5-star
Harry bhai aapka sara lecture Aaj end kr diya
uuid package ki jaga aap todos k map function main aik item parameter aur doosra index parameter pass kar k us index ko as key use kar saktay hain
Harry bhai iss train ka last station konsa hai??❤
ye to acha hai ye itna in depth bta rahay hain
Ye to av suru huaa h bhai
Complete MERN stack developer bnana ha ap sab ko.
Infinite station hai😅
Last project will be creating microsoft from scratch
Sigma Web Dev op................................... Thank you so much for this great holistic complete course for all.
here the last todo is not saved in the local storage please help what i change in code code is same i write like code of source code i just copy and paste\
@@pankajkumarpatel3160 you can use use effect hook with dependency in this case but you have to handle some conditions for some other operations also you can do it by using href hook by making a variable and it will work
East and West Harry sir is the best 🎉🎉 l u ❤
Please continue this series we need such type valuable course...
bhai thanks harry bhai love you for uploading this thanks dil se dhanyawad
sir please continue this series until we become sigma developer !! we want this type of learning from you non stop 365 days... #sigmaBatchop ❤🔥
1:03:33 can anyone explain this condition?
Local Storage is not getting updated with new values. It is storing old value. You are putting the local storage saving function to execute instead of letting React 's state updates' asynchronous nature complete.
did u figured out, how it can be solved?
@@microsoftian Yes. For localstorage to wor properly add a function in useState like this: useState(()=>{localStorage.getItem()}). And in useEffect setItem with tasks in dependency array like this [tasks] .
I encountered this same problem
const saveToLS = (updatedTodos) => {
localStorage.setItem("todos", JSON.stringify(updatedTodos));
}
const handleEdit = (e, id) => {
let t = todos.find(item => item.id === id);
setTodo(t.todo);
setTodos(prevTodos => {
let newTodos = prevTodos.filter(item => item.id !== id);
saveToLS(newTodos);
return newTodos;
});
}
const handleDelete = (e, id) => {
setTodos(prevTodos => {
let newTodos = prevTodos.filter(item => item.id !== id);
saveToLS(newTodos);
return newTodos;
});
}
const handleAdd = () => {
setTodos(prevTodos => {
let updatedTodos = [...prevTodos, { id: uuidv4(), todo, isCompleted: false }];
saveToLS(updatedTodos);
return updatedTodos;
});
setTodo("");
}
const handleCheckbox = (e) => {
let id = e.target.name;
setTodos(prevTodos => {
let index = prevTodos.findIndex(item => item.id === id);
let newTodos = [...prevTodos];
newTodos[index].isCompleted = !newTodos[index].isCompleted;
saveToLS(newTodos);
return newTodos;
});
}
hi, you can try this code. I think its working in here.
import { useEffect, useState } from 'react'
import './App.css'
import Navbar from './assets/components/Navbar'
import { MdEdit } from "react-icons/md";
import { MdDelete } from "react-icons/md";
import { v4 as uuidv4 } from 'uuid';
// OR
// const { v4: uuidv4 } = require('uuid');
function App() {
const [todos, setTodos] = useState([]) // array of all todos
const [todo, setTodo] = useState("") // single todo
const [showFinished, setshowFinished] = useState(true)
// At the begining to load the saved ToDos from local storage
useEffect(() => {
let todoString = localStorage.getItem("todos")
// console.log("Get todos");
// console.log(todoString);
if (todoString) {
let todos = JSON.parse(localStorage.getItem("todos"))
setTodos(todos)
}
}, [])
// Called whenever todos array is changed
useEffect(() => {
// console.log("Todos changed");
saveToLS()
}, [todos]);
const saveToLS = () => {
localStorage.setItem("todos", JSON.stringify(todos))
}
const handleAdd = () => {
if (todo == "") { // empty todo
return
}
setTodos([...todos, { id: uuidv4(), todo, isCompleted: false }]) // add the todo as an object
setTodo("") // reset the input field
console.log(todos);
// saveToLS()
}
const handleEdit = (e, id) => {
let newTodo = todos.filter(item => item.id == id)
setTodo(newTodo[0].todo)
let newTodos = todos.filter(item => item.id !== id) // get all the todos except the button clicked
setTodos(newTodos)
// saveToLS()
}
const handleDelete = (e, id) => {
let newTodos = todos.filter(item => item.id !== id) // get all the todos except the button clicked
setTodos(newTodos)
// saveToLS()
}
const handleChange = (e) => {
setTodo(e.target.value)
}
const handleCheckbox = (e) => {
// get index of the todo and change the isCompleted value
let id = e.target.name;
let index = todos.findIndex(item => item.id == id)
let newTodos = [...todos]
newTodos[index].isCompleted = !newTodos[index].isCompleted;
setTodos(newTodos)
saveToLS()
}
const toggleFinished = () => {
setshowFinished(!showFinished)
}
return (
Add
Show Finished
Your To-Do List
{todos.length == 0 && No To dos to display...}
{todos.map(item => {
return (showFinished || !item.isCompleted) &&
{item.todo}
handleEdit(e, item.id)} className='btn bg-[#222222]'>
handleDelete(e, item.id)} className='btn bg-[#222222]'>
})}
)
}
export default App
React Batch OP 🔥
Best Course ever with amazing projects ⭐⭐⭐⭐⭐
warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
bhai mere me ye error araha hai hamesa me sab aap jaise bataye waisehi kiya hu lekin fir bhi aisa hi araha hai hamesa plz meri madat karo me pareshan hogaya hu solutions search kar karke
Harry bhai software engineering k Roadmap pr video banao
thank you harry bhai for free playlist......... this playlist has benefited me a lot
I am excited
are maja too jab aaya jab harry sir ne delete ka code edit me kar diya or fhir harry sir error find karte huye maja hi aa gya funny😂
Harry bhai is course Mein java in backend ka bhi tutorial banana👍👍👍👍
Thanks Harry and I'm watching video 54 right now. Give me heart......
Finally Today I have finished creating this todo app
Where is your components , in a single file you write all codes
You can add or do it in single page, it depends on you or the project you are working on.
nav bar is simple so....
Why on refreshing, last change was deleted?
React OP ❤
On handleAdd part the saveToLS doesn't work I also compared my code with github code and still can't find where the problem is I checked letter to letter to see if I did something wrong but it doesn't seem like that
please provide the code then we can check
Best course ❤ ever
CHANGING YOURSELF IS CHANGING OTHERS
Big shout out to you sir, keep growing up ❤🎉
worth it you are god like human for us
I was searching for this video to make a react project and thanks to you💗
Stay consistent we will reach last station with our pro poilet #Harrybhai ❤
Good morning Harry sir..❤
Love you brother I need this project
CHANGING YOURSELF IS CHANGING OTHERS
konsi extension hai jo powercell per bhi auto suggestion de raha hai usse plz koi batao
Awesome video 😎 👍
harry sir upload real world like e-commerce or more 😉😉
Please continue this series and thanks a lot
there is one problem rising when there is no todo and we reload the page the todo that i recently deleted comes back
Same issue 😂
@@sameerhussain7708 is your issue solved ?
Have you got the solution
Bhai ap concept bhi sath sath smjhaya kro please k kesy work kr rahain hain
#SigmaBatchOP I am getting an error on this, even that I have written the same as shown in the video can anyone please help me why this is not running.
const handleEdit = (e, id) => {
let t = todos.filter((i) => i.id === id);
setTodo(t[0].todo);
let newtodos = todos.filter((item) => {
return item.id !== id;
});
setTodos(newtodos);
};
const handleEdit = (e, id) => {
let index = todos.filter((i) => { return i.id === id })
setTodo(index[0].todo)
let newTodos = todos.filter((item) => { return item.id !== id })
setTodos(newTodos)
}
Bro, i also facing the error in handleEdit function but when i use "return i.id === id ", my error resolved. Use my above code
Harry bhai Thanks For making This Course For Free!! It Means a Lot For me. #sigmabatchOP
This video is helpful for me 😊😊
Harry bhai mhujha flutter ata hai kya mhugha recact js ko shikna chaye ya phir mhuje flutter ko or depth mai cikhna chaye?
This is my question please pick and i am your follower and student ❤❤❤
flutter -android /ios app mobile development hai , react js - website , web application ke frontend ke liye use hota hai , dono technology bilkul alag hai agar tum frontend developer ban jana chahte ho toh seekho warna mat seekho
if anybody have any problem in this lecture
specificly about how value goes in input after clicking on edit
or any doubts just ask
yes mee??
Pak se ho?
@CodeWithHarry A small Bug is when we save it in local storage after deletion
we probably get jumped to the saveToLS function and the previous state is saved in which the element is still not deleted
Please add something for this
same problem
because saveToLS function runs before Changing State
Encountered the same problem. Did you get the solution yet?
@@shivaivyas3850 pass the new lists along with the function
here the last todo is not saved in the local storage please help what i change in code code is same i write like code of source code i just copy and paste
const isFirstRender = useRef(true);
useEffect(() => {
if (!isFirstRender.current) {
saveToLS();
}
isFirstRender.current = false;
}, [todos])
is this a paid comment section
there are no doubts , only just appreciations
but I have a doubt
When you made "Save to local storage" function it saved the todos in local storage
but when you are adding a todo in todos which is done asynchronusly
In my pc todos are save in localStorage before adding the data
Hard to remember/write css-style-name of tailwind css. I think, default css-style-name is batter than tailwind css-style-name ///......
is this series only front end or it cover backend too like its 0 to 100 web dev?
Harry bhai thori basic level ki coding kre
thanku so much sir for all your efforts and hardwork
Last item does'nt get deleted. what to do?
solution: Remove the reactStrickMode wrapper from the app and the data will remain saved in your device. It took 2 hours to find out.
thanks man
How to delete it then..?
@@yuvanshankarkannan5432 there is a restrict Mode wrapper in index file. Remove it
bro still not working in mine
@@yuvanshankarkannan5432 I just removed the wrapper from the index page.
1:03:01 important part 👍
i am getting an error anyone here who could help me the error is that the last save or last edit or last delete is not saving means if i add two sentence to my todo the first one will be saved to local storage but the second one gets lost when i refresh the page please help #error #sigma #harry
same, plus this also happens when i delete and refresh. did you find any solution ?
@@SahilLokhande-w6y not yet
@@SahilLokhande-w6y i got it first while handing handleAdd make a variable there in which you have to store the result of todos like this const updatedTodo = [...todos, {id and todo here }] then pass this updatedTodo to saveTodo like this
SaveTodo(updatedTodo)
Also receive this updatedTodo in saveTodo and use this updatedTodo with local storage
@@SahilLokhande-w6y if you getting an error that the last time you save ,edit,delete the note. is not saving .
then try to add this code
useEffect(() => {
savetoLs();
})
i solved this issue
Edit to do se index value change ho rhi hai that's not fine,
Todos.map me I'd ki jagah index value ko use karna chaiye that will be easy,
U
I am exxited harry bhai😇😇😇
i am very very excited for this project
Harry bhai shirt Kahn se li😉😉achi lag rahi he mjhe bhi kharidni he plzZ btayen
Please make React Native course😥 We need it harry vaiya🥰
Was waiting for this eagerly
I was already aware about that todo. To item. At 40:10 so , i corrected it😅😅
Harry bhaiya please spring boot par video banado..
Thx coder bhaiya 🙏🙏💐
Bhai thanks 😢 yrr
please emailer coding pr bhi video banao
I am having an error at npm run dev..it says that - 'missing script:"dev" ' ..if anyone can help ..please let me know how to resolve this
Harry bhyia me container me mx-auto laga rha hu usme kuch change nhi ho rha h...mujhe width change krni pad rhi h uski jagh
mx-auto karne se conainer center nhi ho raha hain ?? koi bata sakta hain kyu??
To use mx-auto your container should have display: block .
Have you got the solution bro...??
@@truelyeager316do we have to mention separately..??
Very Nice Project 💛
Harry bhai there is a problem I am facing, which is that the latest added todo, latest deleted todo and latest edited todo is not saving in storage.
yes, i faced the same issue in app also
@@Azadar_110 But after using mongodb as database it is working perfectly.
@@tahirmustafa550bro i skipped the backend part and started react so its ok na i will learn backend while making projects its ok na ??
You can use h1.any class you want
Harry What is your next upcoming course???
Thank You Boss Very impresive
I am having a problem here, after deleting or editing a todo then if I refresh the todo comes back(it happens with only the last deleted/edited/added todo only)
same issue did you figure out any solution
same here somebody please help
Please help
run saveToLS() in a new useffect function which runs on every render
me bilkul same kar raha hu jaisa documentation me hai tailwind css ke but fir bhi ye error kyu araha hai mujhe samjh nahi araha
React OP❤ superb
46:20 Maine mistake phle hi pkd liya tha
i am excited to show myself that i can acheive anything
I am exited
sigma batch OP
state is asynchronous so when we save the todos in local storage the last action is not recorded and when we open it in new windows the last action not visible so the redux tool comes
I posted this issue recently, and also fixed it... You can check it on Sigma Dev repository. It is fixed using only the stuff taught uptill now.
Short form of solution - instead of using a save to LS function... Use "Use effect" to always track change in the list/array
@@ankyie7544 yeah bro i also fixed that using useffect, if the array change then the useeffect will run and call that function
@@ankyie7544 bro listen harry redux video is so basic, i think we have to explore on youtube and i think so chai aur code has very theory based video if want knowledge than u can follow that or just explore by yourself
bhut jaldbazi kri hai iss project me
Plz check local storage part,on refreshing last element is deleted automatically
same issue did you figure out any solution
@@Sam__056 Encountered the same problem. Did you get the solution yet?
@@shivaivyas3850 i basically used useEffect{ ( ... ), localstorage} so that it re-rendered everytime there was update in localstorage
Great insightful learning
react batch op
#SigmaBatchOP
#ReactOp #SigmaBatchOp harry sir this course i very helpful very web developer and #ReactTypescript bhi ho
Sirji, mera tailwind css nahi chal raha ...kiya karu
hello harry bhai can you tell that how can we remove todos that are now completed but when we are clicking on show finished we are getting both completed as well as not completed so is there any idea to only show the completed one when we click on show finished ? also if anyone knows please do share. thankyou!!
bhai last wali condition samjh nhi ayi, show finished wali
Bhai kotline ka full course laiya please 🙏
my question is , insted of tailwind can we use Bootstrap , then will bootstrap work with react as tailwind in working
I'm excited 😊
G.O.A.T HARRY BHAI😊