This is a great series of videos, not only you are showing how to build something, but a thought proccess, which I think it`s lacking from most of the coding videos out there! Keep up the good work and thank you!
I find the non-scripted nature of these videos really great. Its so useful to hear someone go through a thought process when approaching these problems. Thanks!
I think you could do highlighting without the use of controlled inputs with just pure css - using something like fieldset:has(input:checked), not sure this is the exact selector but something like this. But then to count the amount of selected items we could wrap this whole thing in a form and make the form controlled(not really since it doesn't have a value which we set with our state), but keep the inputs uncontrolled - and then use new FormData(e.target) in our form onChange event. Also I've noticed this with your previous video as well - for using an object/array etc in a state I think useReducer is a more convenient solution. useState uses it under the hood anyway. You could even use Immer lib to mutate the state directly in your reducer for a more concise code but that's optional. This is just the stuff I think I would've done differently, I'm not criticizing.
Awesome MultiSelect, I just built one for my company not so long ago, would be nice if you created it as a generic multi select instead of a specific array implementation, would be great if you could make an extended video of the current one, thanks.
hi, can i ask how to create 2 select boxes A and B that can be related and affected like when i make selection 1 in the A box, there will shown (a and b ) options in B box, but when i choose selection 2 in the A box, there will only show ( c and d ) in B box
Nice video. I am a newbie, and for the 'click outside', I just create a tinted empty div as a wrapper, that is behind my point of interest, and I put an onclick event to that... Is this practice correct?
I would suggesting when init Vite project, remove all the styling it comes with. I saw many times you struggled with some issues that caused by the default style Vite has. I love Vite, but clean what ever Vite's default is something I always do at the beginning of my project.
This is a great series of videos, not only you are showing how to build something, but a thought proccess, which I think it`s lacking from most of the coding videos out there! Keep up the good work and thank you!
totally agree about how he shows his thought process too.
I find the non-scripted nature of these videos really great. Its so useful to hear someone go through a thought process when approaching these problems. Thanks!
This was beautiful.
Please keep doing these Interview challenges as this really helps to grasp react logic for beginners
Thank you.
never thought about using the reduce method to create boolean value objects before. Thank you! Learned something new for sure.
Thanks for sharing your thought processes and taking the time for this video.
please do more of this i'm so very much enjoying this, really solidifies react knowledge !
Please never stop this kind of videos
I think you could do highlighting without the use of controlled inputs with just pure css - using something like fieldset:has(input:checked), not sure this is the exact selector but something like this.
But then to count the amount of selected items we could wrap this whole thing in a form and make the form controlled(not really since it doesn't have a value which we set with our state), but keep the inputs uncontrolled - and then use new FormData(e.target) in our form onChange event.
Also I've noticed this with your previous video as well - for using an object/array etc in a state I think useReducer is a more convenient solution. useState uses it under the hood anyway.
You could even use Immer lib to mutate the state directly in your reducer for a more concise code but that's optional.
This is just the stuff I think I would've done differently, I'm not criticizing.
Awesome video! I think you did a great job explaining things!
Thanks for the great video. Is there any chance to make a React Roadmap video ?
giga checkbox is the best haha thanks a lot for the video
Awesome MultiSelect, I just built one for my company not so long ago, would be nice if you created it as a generic multi select instead of a specific array implementation, would be great if you could make an extended video of the current one, thanks.
hi, can i ask how to create 2 select boxes A and B that can be related and affected like when i make selection 1 in the A box, there will shown (a and b ) options in B box, but when i choose selection 2 in the A box, there will only show ( c and d ) in B box
Love this video! Thank you!
I love these challenges ❤️ so much
Hey, what tool do you use that when you drag your mouse it shows how many pixels? Awesome video btw. I hope yoy make more react challenges. Keep it up
Mac screenshot tool
Nice video. I am a newbie, and for the 'click outside', I just create a tinted empty div as a wrapper, that is behind my point of interest, and I put an onclick event to that... Is this practice correct?
I think a listener on the document is more “proper”. I’d probably go look at how existing click outside libraries work
I tried downloading this theme but it looks nothing like yours. Help?
I watch your videos all the time I don`t know why I wasn`t subscribed yet, just fixed that.
Fix your priorities mate! Thanks for the sub
@@WebDevCody Thank you for the problem solving videos, makes me want to get into web development, seems pretty interesting.
I would suggesting when init Vite project, remove all the styling it comes with. I saw many times you struggled with some issues that caused by the default style Vite has. I love Vite, but clean what ever Vite's default is something I always do at the beginning of my project.
yo what is that extension called that highlights the code based on rgb values ?!?!
Hex colors I think?
What are these vscode icon pack called?
It is a good video and I have a question about what you do on ligne 7 usestate
In jsx it’s just useState({})
@@WebDevCody thanks
What theme are you using? I can't find it anywhere.
Bearded theme stained blue
@@WebDevCody Thank you.
just curous. why you use reduce not map? 17:24
pun unintended 😂
what was the pun?
state variable and us state. i think ive been doing much js lately
Another good one. But make another dungeon crawl video or we unsub
wawwwwwwwwwwwwwwwww bro thank u
Good job babe!!! First!!!! Love ya!
my solution const [statesArr, setStatesArr] = useState([])
const stateFiller = (
e: React.ChangeEvent,
index: number,
) => {
let value = e.target.value
let newval = statesArr[index]
if (e.target.checked) {
setStatesArr([...statesArr, value])
} else {
setStatesArr(statesArr.filter((item) => item !== value))
}
}
const DropDownMenu = () => {
return (
{state.map((val: string, index: number) => (
{val}
stateFiller(e, index)}
type="checkbox"
value={val}
key={val}
>
))}