thanks, Pedro !!! Please continue this react series I and my 6 other friends are following you. Best wishes for your health and wealth may God increase it with an infinite loop 👍
I am your biggest fan right now! One suggestion. In almost every tutorial I have seen on UA-cam it's common to say, 'this isn't a CSS tutorial'. And I agree. However, because occasionally the syntax is different depending on how CSS is used (ie background-color v backgroundColor etc) and also because it took me a while not to get confused with styled components, module.css and also because I think in general there is a repetitive pattern for using CSS with React where it's pretty much width, height, flex etc, I actually think in a tutorial like this, for beginners it is worth going over it vs just jumping through, especially since in some ways you can use those ternary operators to show or hide and again that can be confusing, depending on whether you are using basic CSS with JS or styles. Just a thought, not a criticism, I simply suggest it, because you are so thorough with everything else, and the additional amount of time to add this in (or perhaps maybe doing a standalone course on it) might be really helpful for newbies, because the small differences between classic CSS / JS and how to best use it with React are tiny, but of course one tiny error and the page doesn't render which causes a world of pain! Thanks again for your tutorials!
This is a great course. I'm trying hard to get my first internship in Software Dev right now, and I started recognizing that React kept popping up. React has been appealing to me for awhile now, but that was a push. Your course is helping me a lot, thanks. (:
The best React tutorial I have come across. Easy to understand while covering all the important concepts by breaking them into small tasks. Well done Pedro and thank you for putting tremendous effort into your videos to help people learn.
The brilliant video. Do not worry, Pedro. In general, it was not confusing and was not too long indeed, although, I replayed some parts of the video a few times to digest completely . But learning has never been easy. Please, keep adding more video about different aspects of logic in React and different use-cases of the code. It is interesting to learn how you write and structure your code to solve different tasks with basic React syntax .
i am beginner in learning react, learning new concets with hands on practical experience is very enriching. for me, i wish to get a job soon on react and for you i wish lots of blessings! this course and you have been super helpful.
yes sir, i learned react last year in almost a fortnight and within a week i had cleared multile interviews and i joined one of them !!!@@hirensoni1348
Hello Pedro, thanks for your video. To make it even simpler on the id part, you can pass the index of the element into the map() and use it as a props. items.map((foundItem, index) => { return ( )}; Are you planning on doing more videos on how to synchronize mongoDB and React ? Cheers
Thank you @PedroTech, I like it. I think it will be better if you added this: - clear the input after adding the new task - autofocus[input] - I could add an empty task (how to fix it?) - toggle the completed task I wish you the best of luck and good health, Thank you again sir!
Hey Pedro ! I love your react course and I must say this is the best tutorial with simple explanations and easy to follow - along coding video . However, I'd like you to slow down the pace at which you speak when you are explaining stuff as this would be difficult for people who are not fluent or native English speakers to follow. Sometimes I have to playback like 6 or 7 times before I could understand a word Thanks!
Why is the map working without any problem? I thought we need a key value? Besides that: I love your way of teaching and would love to see you making a tutorial where you do complex apps like a food-order website with the dashboard for the shop or an appointment-maker app with a dashboard. Keep up this great work!
the callback function takes three parameters arr.map((element, key, array)=>{ }) element is the required parameter and the other two are optional. so you may omit them and it would still work fine.
thanks Pedro, straight to the point your tutorials and at the same time they are enough to get start immediately. I wish you would post another project like even with the "login in form" that you posted some days. We just want pattern to follow not CSS just when we see that you have color it we undrestand it thta here you can put your css
no no no no you are totally the best so for example when you did the deconstruction how to update the state, everyone on youtube just take it for granted that we know the shortcut how to write the clean code... while you did in a longer way and then you cut it so we can understand it. im talking about the addTask function... you are amazing
delete(task) is not written because parenthesis just after the function name with argument is that you are calling the function immediately but you don't want i,t you want it to be called only after the button is clicked thats is why you are giving a function to onClick attribute with an argument to function as task so that call the function only if button is clicked.
Thanks Pedro! I'm a beginner for ReactJS and your explanation is really great to easily understand and implement. I completed your previous chapters and currently in this video (CRUD operation) and I have a quick question on this. I am clear on the Add and Delete operation and I need clarification on Edit operation. In case if we need to edit the existing Task Name, how it can be achieved? Should we use "document.getElementById().value = {task.Name}" or is there any other effective way?
thanks Pedro, may God bless you for the time and effort you have put in. I am guessing we can also use the ternary operator in the complete task function, as you love using it :-)
Great content. But please try to explain everything you do. Especially 33.00 to 35.05 where you passed props without saying why. Explaining will help for better understanding and not just copying. Also not to rush when talking lol. Great content. I’d always like and I’ve subscribed too.
24:48 I differentiated each task by using the 'key 'argument from the map function. I passed the key in the deleteTask(key) inside the onClick and then in the deleteTask function I wrote the logic to check taskKey!==key. This could also be a solution. const deleteTask=(key)=>{ setTaskList(taskList.filter((task,taskKey)=>taskKey!==key)); }
awesome content. Question... when deleting from the array. could you not just use the index that come with the .map? {todo.map((task, index) => )} . then setTodoList(todoList.filter((task) => task !== indext)) ? We could get the index from the Key={ I }?
for deleting a task, you can simply do something like this const handleDelete = (index) => { const updatedTasks = [...tasks]; updatedTasks.splice(index, 1); setTasks(updatedTasks); }; where index is the index of each element in the array that you grab from the map function
if (task === taskName) { return false; } else { return true; } }); Since the button's delete task will bring up the map argument, and then it will be used again, but now with a new taskName instead of Task as it is in the button's onClick? What value will the taskName have? the same value as task ?
Love your content if you'll do another login/signup with crud and sql workspace could you please show how one reroutes from the login page to homepage when the user is signed in please
Pedro, hello, thanx for super-context, aon more time. I got a question: is it possible to solve your exercise through creating const [complete, setComplete]=useState(true) ??? i tried and as i understand the problem with id of certain task we have. is it possible to solve that way?
If you have a state called complete, then it would only hold information for all the tasks at once. You need to know if each task individually is completed or not, so thats why i made an object for each task.
Thanks for the video! I have a problem....I didn't use a new Task file (32:07) and i just kept it as it is, now i can't find a way to make it green! I did up to the map with the object but i can't get it to green idk how it works!! Pls it'd be great if you could help me!
I've seen a couple of videos of yours and you don't seem to have something that clears the form about submitting. I think it'll be cool to have something in place for that.
cant we just use the index of the todolist as the second parameter of .map() is index and then match it with the index of newtoDolist to delete the current element?
24:07 is it okay to fix this problem in another way? when we display the list on the screen we use the "map" method, so we can use its index and passed it to the "deleteTask" function instead of passing the name of the task and in the function when we use the "filter" method and we can use its index as well so, by comparing the indexes we can delete the clicked task of the list according to its index not its name
I would have liked if you have gonna a little slower while explaining the topics specially when you're using the variables as it gets kind of confusing with all the variables having the very similar names. But yeah, overall a great video. Will probably need to watch it multiple times to get the points.
When I read the code I understand it perfectly but when I try to write the same code without looking in the example I stuck, I can't remember the logic. What to do for this ? how to master this solving problem thinking? I appreciate if you replay my comment.
![ReactJS Course [6] - Component Lifecycle | UseEffect Tutorial](http://i.ytimg.com/vi/yHdX4dCl5CY/mqdefault.jpg)
![ReactJS Course [6] - Component Lifecycle | UseEffect Tutorial](/img/tr.png)
![ReactJS Course [4] - UseState Hook | States in React Tutorial](http://i.ytimg.com/vi/iBfr6eOcCMg/mqdefault.jpg)
![ReactJS Course [7] - How To Fetch Data From an API in React](http://i.ytimg.com/vi/je3FTTunyp4/mqdefault.jpg)
thanks, Pedro !!! Please continue this react series I and my 6 other friends are following you. Best wishes for your health and wealth may God increase it with an infinite loop 👍
Amen! Thank you for watching my videos :)
I am your biggest fan right now! One suggestion. In almost every tutorial I have seen on UA-cam it's common to say, 'this isn't a CSS tutorial'. And I agree. However, because occasionally the syntax is different depending on how CSS is used (ie background-color v backgroundColor etc) and also because it took me a while not to get confused with styled components, module.css and also because I think in general there is a repetitive pattern for using CSS with React where it's pretty much width, height, flex etc, I actually think in a tutorial like this, for beginners it is worth going over it vs just jumping through, especially since in some ways you can use those ternary operators to show or hide and again that can be confusing, depending on whether you are using basic CSS with JS or styles. Just a thought, not a criticism, I simply suggest it, because you are so thorough with everything else, and the additional amount of time to add this in (or perhaps maybe doing a standalone course on it) might be really helpful for newbies, because the small differences between classic CSS / JS and how to best use it with React are tiny, but of course one tiny error and the page doesn't render which causes a world of pain! Thanks again for your tutorials!
This series your creating is truly so amazing and helpful thanks
This is a great course. I'm trying hard to get my first internship in Software Dev right now, and I started recognizing that React kept popping up. React has been appealing to me for awhile now, but that was a push. Your course is helping me a lot, thanks. (:
The best React tutorial I have come across. Easy to understand while covering all the important concepts by breaking them into small tasks. Well done Pedro and thank you for putting tremendous effort into your videos to help people learn.
Well you definitely are a teacher, you have got some cool explanation skills there.
Simple, yet brilliant!
Ty Pedro, you are the best!
🙇🤜
The brilliant video. Do not worry, Pedro. In general, it was not confusing and was not too long indeed, although, I replayed some parts of the video a few times to digest completely . But learning has never been easy. Please, keep adding more video about different aspects of logic in React and different use-cases of the code. It is interesting to learn how you write and structure your code to solve different tasks with basic React syntax .
i am beginner in learning react, learning new concets with hands on practical experience is very enriching. for me, i wish to get a job soon on react and for you i wish lots of blessings! this course and you have been super helpful.
have you got job?
yes sir, i learned react last year in almost a fortnight and within a week i had cleared multile interviews and i joined one of them !!!@@hirensoni1348
Hello Pedro, thanks for your video. To make it even simpler on the id part, you can pass the index of the element into the map() and use it as a props.
items.map((foundItem, index) => {
return (
)};
Are you planning on doing more videos on how to synchronize mongoDB and React ?
Cheers
thanks
Best react teacher of the world....
and the Award goes to Mr. Pedro ❣️🔥❣️👏
Loads of love from Tamilnadu, India ❣️❣️
Thank you hahaha!!
Hell yeah!
Am following along with you bro keep releasing more and more.
Demorei pra perceber que vc era brasileiro, cara. Que orgulho
obrigada pelo conteúdo!
Excelente Pedro!
Estou fazendo uma revisão do React e os seus tutoriais tem sido bem didáticos!
Keep it up!
I have recently found you on youtube, I am a novice in React, respect for your work and knowledge, I have learned a lot
Welcome aboard!
Gotta love todo lists in crud!
Very easy explanation, and it's a great way to deliver the message. Keep going, Pedro's
Thank you @PedroTech, I like it.
I think it will be better if you added this:
- clear the input after adding the new task
- autofocus[input]
- I could add an empty task (how to fix it?)
- toggle the completed task
I wish you the best of luck and good health,
Thank you again sir!
Wow, so smooth, so clear. Thank you 😊
great tutor of react on youtube I have ever watched is pedro I am revicing my react with your this course
Wow, thanks!
thanks ,Pedro !!! please continue this series collogues and me are following .Awesome
thanx a LOT, Pedro! you do the best react context, for me personally it is true!
I appreciate that!
Great video im learning so much so fast!! Im getting better already!!! I want to learn everything from you!
i dont know about other youtubers but your react course is the best....
good video man had to watch a couple times but i understand roughly 90%
Hey Pedro ! I love your react course and I must say this is the best tutorial with simple explanations and easy to follow - along coding video . However, I'd like you to slow down the pace at which you speak when you are explaining stuff as this would be difficult for people who are not fluent or native English speakers to follow. Sometimes I have to playback like 6 or 7 times before I could understand a word
Thanks!
God bless you Man... You're the best....
best react course i have ever watch
this video made me realise that i can build a to do list just after watching react tutorials for one evening
thx for the great explanation!
mans on that sprint week
Awesome Explanation Pedro
instead of creating an id, we can use the index of the array to identify it.
thanks a lot sir. your videos has helpd me a lot
Great vidoes. I wish you had explained why the delete had to be wrapped in an arrow function
pedro, you made it simple !!
Brother your tutorials are awesome👍. I want to learn more from you. Please make beginner friendly readt projects
Why is the map working without any problem? I thought we need a key value?
Besides that: I love your way of teaching and would love to see you making a tutorial where you do complex apps like a food-order website with the dashboard for the shop or an appointment-maker app with a dashboard.
Keep up this great work!
the callback function takes three parameters arr.map((element, key, array)=>{ }) element is the required parameter and the other two are optional. so you may omit them and it would still work fine.
thanks Pedro, straight to the point your tutorials and at the same time they are enough to get start immediately. I wish you would post another project like even with the "login in form" that you posted some days. We just want pattern to follow not CSS just when we see that you have color it we undrestand it thta here you can put your css
no no no no you are totally the best so for example when you did the deconstruction how to update the state, everyone on youtube just take it for granted that we know the shortcut how to write the clean code... while you did in a longer way and then you cut it so we can understand it. im talking about the addTask function... you are amazing
I've spent like 2 hours to solve it. omg it's too easy.
awesome react course i'have ever seen...
waiting for next video... it is awesome.
Thanks man for this tutorial
thanks pdro
with your amzing course
delete(task) is not written because parenthesis just after the function name with argument is that you are calling the function immediately but you don't want i,t you want it to be called only after the button is clicked thats is why you are giving a function to onClick attribute with an argument to function as task so that call the function only if button is clicked.
good explanation. thanks
Nice tutorial and exercise 👍
Thanks ! Awesome one! please share Update operation
Thanks Pedro! I'm a beginner for ReactJS and your explanation is really great to easily understand and implement.
I completed your previous chapters and currently in this video (CRUD operation) and I have a quick question on this.
I am clear on the Add and Delete operation and I need clarification on Edit operation.
In case if we need to edit the existing Task Name, how it can be achieved?
Should we use "document.getElementById().value = {task.Name}" or is there any other effective way?
Very useful tutorial thank you
Glad it was helpful!
Might be good to show us the difference between redux and redux-toolkit. With use case of API in each scenario.
They're the same, but newer version
Great video bro!
you are too good bro, big fan
You rock man! Thank you 🙂
thanks Pedro, may God bless you for the time and effort you have put in. I am guessing we can also use the ternary operator in the complete task function, as you love using it :-)
Great content. But please try to explain everything you do. Especially 33.00 to 35.05 where you passed props without saying why. Explaining will help for better understanding and not just copying. Also not to rush when talking lol. Great content. I’d always like and I’ve subscribed too.
24:48 I differentiated each task by using the 'key 'argument from the map function. I passed the key in the deleteTask(key) inside the onClick and then in the deleteTask function I wrote the logic to check taskKey!==key. This could also be a solution.
const deleteTask=(key)=>{
setTaskList(taskList.filter((task,taskKey)=>taskKey!==key));
}
Hey could you please elobrate or can you paste the code in here.. really confusing
edit: I did it man, thanks though.
@@sakthikumargurunathan6911 Write your code in your editor then copy paste bro.
and after going through too many react tutorials i stopped at this one. Thanks pedro Tech
Very nice tutorial🔥🔥
In to the fifth video, bruh you are an Academy, An React Academy...
awesome content. Question... when deleting from the array. could you not just use the index that come with the .map? {todo.map((task, index) => )} . then setTodoList(todoList.filter((task) => task !== indext)) ? We could get the index from the Key={ I }?
Can you please make a video on refresh token implementation in Reactjs and Apollo Server Express
for deleting a task, you can simply do something like this const handleDelete = (index) => {
const updatedTasks = [...tasks];
updatedTasks.splice(index, 1);
setTasks(updatedTasks);
};
where index is the index of each element in the array that you grab from the map function
Yup
Thanks Pedro
Can't we use the index of the task in the todoList array to delete the chosen task?
I don't see any issues with it.
great content, thank you
Maybe you could make a tutorial on how to make a MERN blog, with images stored in Cloudinary 🤗🙏?
It would have been better if u added edit functionality to it also
The `completed` part is supposed to be the Update part of the crud :) Editing would be very similar to that!
@@PedroTechnologies it would have been better if u added edit functionality to it also
I know it doesn’t matter which way you do this but I prefer to use index to filter so you can just do I == index
lol made this comment before seeing the part where you changed it 😂
Done! Thanks a lot!
A question as to whether the "task" in deleteTask(task) refers to the map mapping
{todoList.map((task) => {
return (
{task}
deleteTask(task)}> X
const deleteTask = (taskName) => {
const newTodoList = todoList.filter((task) => {
if (task === taskName) {
return false;
} else {
return true;
}
});
Since the button's delete task will bring up the map argument, and then it will be used again, but now with a new taskName instead of Task as it is in the button's onClick? What value will the taskName have? the same value as task ?
Thanks @Pedro
Love your content if you'll do another login/signup with crud and sql workspace could you please show how one reroutes from the login page to homepage when the user is signed in please
bro really you are a gem god bless you
Will you be adding update functionality to the TodoList?
PEDÃO É DO BRASILLL VALEU MANO
i need the complete toturial for react
Pedro, hello, thanx for super-context, aon more time.
I got a question: is it possible to solve your exercise through creating const [complete, setComplete]=useState(true) ???
i tried and as i understand the problem with id of certain task we have. is it possible to solve that way?
If you have a state called complete, then it would only hold information for all the tasks at once. You need to know if each task individually is completed or not, so thats why i made an object for each task.
@@PedroTechnologies Thanx, Pedro!
Thank you so much, sir 👍🤝
Maybe you could make a tutorial on how to make a MERN blog, with images stored in Cloudinary 🤗🙏?
Thanks for the video!
I have a problem....I didn't use a new Task file (32:07) and i just kept it as it is, now i can't find a way to make it green! I did up to the map with the object but i can't get it to green idk how it works!! Pls it'd be great if you could help me!
Please create a roadmap video for full stack development
I've seen a couple of videos of yours and you don't seem to have something that clears the form about submitting. I think it'll be cool to have something in place for that.
great job!!
Hey Pedro, I really struggle with CSS could u make a good tut on that!
What will be the way if we are not passing the delete function as props?
cant we just use the index of the todolist as the second parameter of .map() is index and then match it with the index of newtoDolist to delete the current element?
Are you using typescript maybe :D? I'm trying rewrite to into TS and it is difficult xD
Thanks Pedro !!!!!.
Great tutorial, can you make a redux-toolkit with firestore
ur the man
the logic of how to build stuff is actuallly different from building from Javascript scratch it takes a little to convert
24:07
is it okay to fix this problem in another way?
when we display the list on the screen we use the "map" method, so we can use its index and passed it to the "deleteTask" function instead of passing the name of the task
and in the function when we use the "filter" method and we can use its index as well
so, by comparing the indexes we can delete the clicked task of the list according to its index not its name
i did that and it actually worked!
Can you do the delete operation with the splice method...
❤❤❤ i want to ask if its ok to use index instead of id’ thanks and more power🎉
Yes!
I would have liked if you have gonna a little slower while explaining the topics specially when you're using the variables as it gets kind of confusing with all the variables having the very similar names. But yeah, overall a great video. Will probably need to watch it multiple times to get the points.
Wouldn't it be enough to open a new array for id?
Thanks for the tutorial. Wondering how can we clear the input each time we add a task and submit the value?
Hello you can pass setNewTask(" ") inside addTask function
Why do you add .id at the end in the task object?
When I read the code I understand it perfectly but when I try to write the same code without looking in the example I stuck, I can't remember the logic. What to do for this ? how to master this solving problem thinking? I appreciate if you replay my comment.
'task' is assigned a value but never used .....--> how do i call the "task" var ??
Which font are you using pedro?
Thank you.