You're my official web development mentor: clear and thorough examples with super smooth delivery. When I need to quickly check something or learn a new concept, I always resort to this channel. Keep up the good work!
I 100% agree, and would recommend folks to sign up To Kyle’s emailing list. It Comes with a lot of insightful tips that every developer should at least be made aware of
You mentioned some good points for this. Another console warning I might add to further illustrate the point is with the starting example, the browser console will complain that two elements have the same id.
The query selector call was incorrect, you have to use a # character to indicate ID. You also have to escape the colons with double backslashes so this works: document.querySelector("#\\:r1\\:")
Aren't you supposed to use single backslashes to escape the character? I've never had to do that before in JS, so I'm not sure. Because \\ would escape \, no?
Nice job Kyle, You are really doing the web simplified. I humbly request to you please create a redux course section to simply the concept of react redux. Thanks 👍
Created id can be directly used in getElementById and in case of proper escaping it can be used in querySelector too. I've posted video about that on my channel 4 monts ago.
It is important to note the difference between "unique" and "random". The requirement here is that the ids are unique, which means that using random numbers actually introduces a logic error.
I can count on one hand the number of times I've needed to use an id field in React. If you nest your inputs inside label, you don't need the id or htmlFor attributes.
rendering is building the html element that make the page, hydration is adding the data you want to display. Sometimes the data is static so you don't need to hydrate the page, but most of the time you hydrate by calling an API or something.
You can select them in CSS if you escape the colons with a backslash like #\:r1\: { … } You can still select them with JS too with document.querySelector("#\\:r1\\:")
Yes, you can escape colons by writing their codes. Same with querySelector. I've shown querySelector in my April's video, but haven't shoun css. Anyway, css selector will be the same as for querySelector, except you don't need to escape backslash for the code.
This might find some use cases in the future, but if I am going to write `${id}-email` I might as well write id="emailInput". It is solving an issue that doesn't exist. I have been using react for 6years now, only time I have used ids is when changing style of some 3rd party library
From what I understood... I think the hook helps you when the component is used multiple times. He showed how the same form was used at the top and bottom of the page. If you were going to use just id="email" then you will get two input elements with the exact same id, the hook generates different id's so you don't have to worry about repetition :P
I understand this is a contrived example, but you could solve this in pure HTML by ditching the id and htmlFor attributes, and having the input be a child of the label element instead of a sibling.
You're my official web development mentor: clear and thorough examples with super smooth delivery. When I need to quickly check something or learn a new concept, I always resort to this channel. Keep up the good work!
I 100% agree, and would recommend folks to sign up To Kyle’s emailing list.
It Comes with a lot of insightful tips that every developer should at least be made aware of
You mentioned some good points for this. Another console warning I might add to further illustrate the point is with the starting example, the browser console will complain that two elements have the same id.
Thank you, that is a really useful hook.
I'm going to start using that ASAP :)
Just a perfect explanation, thanks! When I read docs to React I get 1/10, but with this video, all is clear and I don't forget about this future.
The query selector call was incorrect, you have to use a # character to indicate ID.
You also have to escape the colons with double backslashes so this works: document.querySelector("#\\:r1\\:")
I was going to say that, but I don't get the point why React team did that, I mean adding double colon
Colon can be replace by it's code. I have a video about it.
@@ed1nh0 I think, they simply wanted to prevent conflicts with normal ids on the page.
@@QwDragon good point
Aren't you supposed to use single backslashes to escape the character? I've never had to do that before in JS, so I'm not sure. Because \\ would escape \, no?
Nice job Kyle,
You are really doing the web simplified.
I humbly request to you please create a redux course section to simply the concept of react redux.
Thanks 👍
straight to the point!
Love your videos!
Created id can be directly used in getElementById and in case of proper escaping it can be used in querySelector too.
I've posted video about that on my channel 4 monts ago.
Awesome tip! I've found myself appending an index to mapped items, which worked fine for me, but would not work in a scenario like this. Thanks!
Love your videos. Thank you!
It is important to note the difference between "unique" and "random". The requirement here is that the ids are unique, which means that using random numbers actually introduces a logic error.
I can count on one hand the number of times I've needed to use an id field in React. If you nest your inputs inside label, you don't need the id or htmlFor attributes.
Ohhh nice this seems nice for using map() that requires a key in React too. It's a built in uuid generator right?
The document.querySelector() should've had a '#' tag on it because it's an id, right?
Make a video on the new Fresh framework from Deno! I am currently working on converting my old react/firebase site into Fresh
Is it better than nextjs?
@@Peter-yd2ok By design yes, it's much faster. By support no, you are trailblazing by using it
so the values are random, then how can we give css to it or store the value of that input box in backend?
I guess that can be used to generate a key for .mapped components?
Isn't the querySelector error because you did ":r1:" and not "#:r1:"?
Edit: nvm I just tried it and it's still not working.
You have to escape the colons with double backslashes like document.querySelector("#\\:r1\\:")
I also wondered, I tried it and I found that document.getElementById(':r1:') works.
can u please explain the difference between rendering and hydrating in react
rendering is building the html element that make the page, hydration is adding the data you want to display. Sometimes the data is static so you don't need to hydrate the page, but most of the time you hydrate by calling an API or something.
Thanks kyle.but in this example you can pass ID as a prop to the component right ?
let's go 1M 🔥
Is it still possible to select those ids with css?
you should be able to because by the time you can see in on the console it is part of the DOM already if im not mistaken.
You can select them in CSS if you escape the colons with a backslash like #\:r1\: { … }
You can still select them with JS too with document.querySelector("#\\:r1\\:")
Yes, you can escape colons by writing their codes. Same with querySelector. I've shown querySelector in my April's video, but haven't shoun css. Anyway, css selector will be the same as for querySelector, except you don't need to escape backslash for the code.
Mr. Kyle Cook is the man 😎
Are there any use cases for useId in React-Native?
How do you those random ids if you don't know the correct id?
@Web Dev Simplified Hello. I have idea. Do you can clone orgchart js?
Please make a video on react app using vite
What's the other use case other than label input?
Label for an control. And id of the form if you want to bind control placed outside of the form to it.
This might find some use cases in the future, but if I am going to write `${id}-email` I might as well write id="emailInput". It is solving an issue that doesn't exist. I have been using react for 6years now, only time I have used ids is when changing style of some 3rd party library
I was going to mention this too.
How to concatinate two input values while typing if any one know please tell me the answer
I am not getting the last point. Why htmlFor={`{id}-email`} and id={`${id}-email`} is better than htmlFor="email" and id="email".
From what I understood... I think the hook helps you when the component is used multiple times.
He showed how the same form was used at the top and bottom of the page. If you were going to use just id="email" then you will get two input elements with the exact same id, the hook generates different id's so you don't have to worry about repetition :P
I think the querySelector failed only because you didn't put a # in front of it
If we''re manually making each id a different one, why not avoid `useId` altogether and simply provide id names to elements manually?
The performance overhead of calling useId is effectively zero.
I understand this is a contrived example, but you could solve this in pure HTML by ditching the id and htmlFor attributes, and having the input be a child of the label element instead of a sibling.
Email
I smell high number of views
can we get video about firebase auth with redux? it would be nice :D
Is a scenario that there are 2 inputs with the same id? LOL :D
Bro make a nextjs course
Up
couldn't you just pass in an Id as a prop?
It's difficult to select with querySelector but not impossible. You have to do it this way: document.querySelector('[id=":r7:"]')
Hey @WebDevSimplified can you help me in something?