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
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.
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?
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.
This was beautiful.
Please keep doing these Interview challenges as this really helps to grasp react logic for beginners
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!
Thanks for sharing your thought processes and taking the time for this video.
never thought about using the reduce method to create boolean value objects before. Thank you! Learned something new for sure.
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.
Thanks for the great video. Is there any chance to make a React Roadmap video ?
Awesome video! I think you did a great job explaining things!
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.
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
Love this video! Thank you!
giga checkbox is the best haha thanks a lot for the video
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
I love these challenges ❤️ so much
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 tried downloading this theme but it looks nothing like yours. Help?
What theme are you using? I can't find it anywhere.
Bearded theme stained blue
@@WebDevCody Thank you.
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
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?
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
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.
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
Another good one. But make another dungeon crawl video or we unsub
Good job babe!!! First!!!! Love ya!
wawwwwwwwwwwwwwwwww bro thank u
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}
>
))}