Great content.... I have a problem though, if you have more than one of the same things on the board (e.g. two tasks called 'Hello') and you delete one, it deletes every task. Any idea why? Thanks.
It's most likely because of either or both of these issues: (1) using the index as the key when mapping the notes and/or (2) where you're carrying out the deletion. I'll post another video tomorrow to tie up this loose end!
hi , I made a different version for deleting a task and it seems it's working: const Board = ({ task, taskList, setTaskList }) => { const handleDelete = () => { // we'll search the index of the task we want to remove from the task list let removeTaskIndex = taskList.indexOf(task); // we'll create a new array that will copy the prop task list const [...newTasks] = taskList; // we'll delete the task from the new array of tasks list newTasks.splice(removeTaskIndex, 1); // we'll set the new tasks setTaskList(newTasks); }
or even more simple, since there is a small bug in my solution (in case we'll have same task, will always delete the first) we can just use the index prop : const Board = ({ task, index, taskList, setTaskList }) => { const handleDelete = () => { // we'll create a new array that will copy the prop task list const [...newTasks] = taskList; newTasks.splice(index, 1) ; setTaskList(newTasks); }
Nice project, I'm also studying from the new react beta docs, it's much better than the previous one that used classes, but it's not easy at all, you need a solid js base... I'm waiting for the next projects, if in one of these you could explain the difference between state and props (thinking in react) and on where or not to use a state I would be very grateful to you, ow and also if you can zoom the text on vsc :)
Thank you! And I agree completely, it's way better than using classes but it's definitely not the most intuitive when learning it. I much prefer Svelte actually. I uploaded another video last night, zoomed in on the text editor this time. Hopefully the text size is more readable. If not, I'll keep zooming in 😂. I can certainly do a more in-depth study of state and props, I have some ideas but let me do some prep work first 🤓
Best beginner level projects, very Beneficial playlists, in search of gold we found gem.
thankyou very much for this video, new thing in my portfolio! I needed to do it, THANKS!!
Great content.... I have a problem though, if you have more than one of the same things on the board (e.g. two tasks called 'Hello') and you delete one, it deletes every task. Any idea why? Thanks.
It's most likely because of either or both of these issues: (1) using the index as the key when mapping the notes and/or (2) where you're carrying out the deletion.
I'll post another video tomorrow to tie up this loose end!
hi , I made a different version for deleting a task and it seems it's working: const Board = ({ task, taskList, setTaskList }) => {
const handleDelete = () => {
// we'll search the index of the task we want to remove from the task list
let removeTaskIndex = taskList.indexOf(task);
// we'll create a new array that will copy the prop task list
const [...newTasks] = taskList;
// we'll delete the task from the new array of tasks list
newTasks.splice(removeTaskIndex, 1);
// we'll set the new tasks
setTaskList(newTasks);
}
anyway, great video :)
or even more simple, since there is a small bug in my solution (in case we'll have same task, will always delete the first) we can just use the index prop : const Board = ({ task, index, taskList, setTaskList }) => {
const handleDelete = () => {
// we'll create a new array that will copy the prop task list
const [...newTasks] = taskList;
newTasks.splice(index, 1) ;
setTaskList(newTasks);
}
@@catalinciprian894 I used the same method and it works really well.
Nice project, I'm also studying from the new react beta docs, it's much better than the previous one that used classes, but it's not easy at all, you need a solid js base... I'm waiting for the next projects, if in one of these you could explain the difference between state and props (thinking in react) and on where or not to use a state I would be very grateful to you, ow and also if you can zoom the text on vsc :)
Thank you! And I agree completely, it's way better than using classes but it's definitely not the most intuitive when learning it. I much prefer Svelte actually.
I uploaded another video last night, zoomed in on the text editor this time. Hopefully the text size is more readable. If not, I'll keep zooming in 😂.
I can certainly do a more in-depth study of state and props, I have some ideas but let me do some prep work first 🤓
Hi i don't understand the filter condition , how the (index===removeIndex) condition filtered the desired result, please explain.
please where i can get the source code