React JS Forms | Controlled Inputs | Learn ReactJS

At what point does the parent component (in this case App.jsx) become too large from lifting all the state up? How can this be optimized or broken out efficienty?

I like the video but I feel there is a huge level increase from the previous ones. Thanks anyway. Good stuff.

I must say this guy is legend , Love & respect from India (Pune)

hey dave since i did not had any data in the local storage, i added this statement in app.js :- const [items, setItems] = useState(JSON.parse(localStorage.getItem('shoppinglist')) || [ ] ); But how should i add data to the local storage before. how did you add data milk and bread before into the local storage?

Here in the form input element we have provided 'required' as an attribute then why the need of if (! newItem ) return ;

Great Tutorial Sir

Kudos. Great materials for learning React!

Very clean way to filter! state stays the same and you just filter the results you pass to the component. very nice! i always created a filtered state but this is so much easier and reduces the need for extra states for no reason.

So many great details

Fantastic, thank you very very....much. Please don't stop making React.js videos

hi dave..

Objects are not valid as a React child (found: object with keys {id, checked, item}). If you meant to render a collection of children, use an array instead.

Cannot read properties of null (reading 'filter')
TypeError: Cannot read properties of null (reading 'filter')

this error is comiing

LOL I just commented on previous lesson about the key attribute on the <li> tag then started watching this one... and the first thing you do... removes the attribute :).

In your CSS at the start you labelled it "addForm" & "searchForm" -- however isn't css convention all lowercase with dashes e.g. "add-form", or is this a css/react convention ? I've always done it all lower with dashes.

Great episode, many thanks. Looking for to the rest in the play list. :)

Dave i did not really get it there when check for the blank value and prevent it from getting submitted . cause you have already set the value of new item to an empty string and empty sring returns a truthy value

Amazing content!!!

Hi Dave, i just learned a lot form your video. i supposed to learn from your channel since a long time ago . I regret so much to just find your channel a few days ago. thanks a lot dave. big regards from Indonesia

I'm following your tutorial. I don't know how much I will get but your tutorial seems easy to me. Thanks

Awesome explained search functionality ! Thank you very much !

As I say I will comment on each of your video in order to help you out :) Just a question, after I finish this course which course will be recommended by you to take bcs for example you have a lot of react videos also. I just saw 1min of React hooks and it seems that they are some part of other react videos (maybe this playlist !) like I dont know. After I finish all the 52 videos here should I goo to authentication ?

another excellent tutorial, thanks man

At first I thought react wasn't meant for me, but now I have become more confident

Your tutorials are probably the best out there :) Subbed.

if we delete all the items and close the browser, and again restart the server, it displays an error saying items.length is invalid as items is null in the footer and content section as both reads .length property for the expression. can you help me to solve this issue.

Huge fan of your videos! Very descriptive and engaging. I especially like how you constantly say the shortcut keys you are using, helps drill those into my head for memory. I want to note though, I ran into an error. You dont address what will happen if local storage is empty and you try to getItem. I got a black screen when i cleared my storage. I added an if statement to check if local storage returns null. If null then I set item to json stringify an empty array. I dont know if its best practice, but it solved my issue.
edit- I seen another comment that addressed this and their solution was better. They just used '|| []' after the localStorage.getItem statement and its much cleaner than another if statement like i had

Thank you sir!

Thank you sir!

Comment for up

thanks again for the tutorial! Quick question, I noticed that you used camel case in the index.css, and I wanted to know if that's okay to do that. VS code gave me a little message to use kebab-case instead of camel case, but I also get that we used camel case in the jsx file. Is it safe to use camel clase in CSS file? or naming in camel case in jsx file?

I have hardtimes understand login behind this line could you pls explain how how pass search and getting result here??


{items.filter(item=>((item.item).toLowerCase()).includes(search.toLowerCase()))}

Do we still need those semi-colons on the end of lines? Half the lines have them and half don't

Hi Dave

const [items, setItems] = useState(JSON.parse(localStorage.getItem('shoppinglist'))); using this statement i tried to get the data from local storage and the output was complete blank page.
please help.

Fantastic teacher !!! Thanks Dave i learned a lot from this series.

Good

Thanks for another great video. At the end of the video, is ‘inputref.current’ a current state? Does it always pointing to the input element? Trying to understand what inputref.current.focus() is doing.

const handleSubmit = (e)=>{
e.preventDefault();
if(!newItem) return; --< and this line
addItem(newItem);
setNewItem(''); <-- what's the meaning of this line here?

could you pls explain us Dave??

you've got way too many js items trying to teach inherited props and mutliple modular calls this is very bad for learning

Hi Master Dave i want to ask you about
How I can start my own project i was watched your toutirul but i can not do any think with my own self. how i can fixed this problem and thancks for all this amazing content and how you are learned all this stuff with your own self ❤ have a good day .

Please don't stop making React.js videos. You are the best!

Excellent as always!

Fantastic, thank you for these videos! You should do a react course on udemy

thanks a lot Dave

Hi sorry if I sound rude but I think thumbnail of actual preview might make more people to click on your vids.

BTW your tutorials are to the point and soo good for a beginner. 👌
You are underrated.

Question. As long as the array isn't empty, won't items.length always be the same as the last id? Why will items.length + 1 not work?

Thank you for your course. I have really learned a lot of things.

Amazing tuts as always Dave!

I've noticed a bug when setting the initial data. The very first time you launch the application (or when you wipe the local storage), localStorage.getItem('shoppinglist') returns null, and JSON.parse(null) returns null, but our application expects an array. I would set an empty array as a default value for this particular case.

JSON.parse(localStorage.getItem('shoppinglist')) || [];

I love your teaching method..please make a play list like this one with node. Then make more and more project with mern stack