The input has an inputMode prop that you can set to numeric, this will avoid those arrows that show up on inputs where the type is set to number and you'll still only be able to enter numbers in the input.
Hello! I am truly grateful for these videos. I have had finished the odin project but had been scared to apply for jobs, your channel and you really help me get through that fear. Keep these challenges coming!!!
Also I must say that to whoever might read these, If you are someone who is bored at watching videos that teach "useState in React" kind of videos, watching this channel and experiencing his thought process will help you better than watching countless udemy courses. You are so through and to the point and this 40 mins of video basically feels 10 mins!
@@WebDevCody You're also my favorite React content creator lately, by a long shot. I love watching the live coding/refactoring and the thought process is just pure guidance for us juniors. Keep up the good work Cody, thanks a lot!
Great video, I wasn't aware the debugger keyword existed, that will come in handy. The proxy trick was also really cool I'll have to keep that in mind if I ever need it.
Those kinds of videos are awesome. They are literally better than clone projects. Because we can understand the basics of .tsx, and gives us a better understanding when we are using real-life scenarios or side projects. I hope you keep doing interview content
I think the way you wrote the setGridValue function is incorrect, because you are actually mutating the state directly. For example: const x = [[1,2],[3,4]]; const y = [...x]; y[0][0]=5; console.log(x[0][0]); prints 5 insted of 1. This is because 2d array is array of refrences to arrays, so by doing [...x], you just copy only references to those nested arrays but not arrays themselves. I think what you need to do is: const x = [[1,2],[3,4]]; const y = x.map(a => [...a]); y[0][0]=5; console.log(x[0][0]); Mutating state like you did can lead to very hard to detect bugs. Am I right or am I missing something?
Never knew about the `new Array` method, and never used the debugger (which is a shame, and I should learn it). And the proxy thing, that's extremely helpful. Learnt so much in 40 min, your videos are definitely worth the time, Thanks :)
This was cool and well explained. Honestly, AdventOfCode is also a really good practice for interview question and its a fun way to mix coding and the festive month. In my experience interviewers fail to give you practical examples like you've shown and still give these hardly ever used algorithm type questions.
Nice video with some cool concepts! Though, is it me or is your UI rendering the rows as columns? At 16:23 in the vid you are editing UI row 1, cell 6, but in your data model its updating row 5 cell 1? And isnt that the reason you lateron have to swap the rowIndex and colIndex?
i am coding my own sudoku currently over on github ( github -> bloodiko -> sudoku (also on github pages)) a good solution for the spacing issue of the grid is to use "repeat(9, min-content)" making it possible to even dynamically adjust cells based on screen hight later on. (but overall my sudoku is not that advanced yet, and my code probably massivly overcomplicated, but i tried what i can do.) Also: Keep in mind that spread (...) will only apply to the outer array (row). not the inner array(col/cell) this makes it not totally new, but just partially new with cols/cells still beeing references.
that's good info, css is my weakest skill, so there is a lot of I forget exists when doing flex box and grid layouts. Yeah the ... will remain the same references to all the elements, but provide you a new array reference, which is fine in this case. I just wanted to tell react to re-render, and providing it a 100% brand new array is not necessary to achieve that.
@@WebDevCody true I needed it in some cases, that's why I mentioned it. Also I didn't know this min-content css stuff myself, my brother showed me, and helped me there with my project which was cool.
I've been practicing and watching these react interview questions for a while now, incase I want to make a switch to a new company/job. However, I'm coming to realise there are quite a few companies out there who don't even test you on React at all. Even for a front-end engineer role, topics on system design, Leetcode (med to hard) and maybe a basic front-end test in vanilla JS are most likely to come up. I know this is more prevalent in FAANG companies, but could you share more insight on this topic? Are newer more modern small/mid sized companies still following this practice? From what I've heard from my senior engineers, there are definitely still some companies out there who don't test you on JS frameworks and assume from your knowledge of DSA and vanilla JS you are competent enough to pick up any JS framework.
That is probably true. I haven’t done real interviews for react positions in a while so idk what the standard is. The title is a bit more of a click bait but the challenges are still good to practice doing. I do think being able to demonstrate you can build something basic in react does sell yourself as a developer. If a company is confident in hiring someone who can reverse a binary tree, then that’s up to them. I personally don’t want someone to spend the first month of their paychecks learning react if I was running my own business
@@WebDevCody Thanks for the reply and your insight. You make a good point about paying someone to learn react in their first month. Keep up the dope content, I've been watching every single video you've put out for the last few months
Hey, what's your thoughts about using declarative methods instead? Do you think it would look better for the interviewer? ex: instead of for...for... using response.split(''), grid.push(response.splice(0, 9)) while length>0, etc, etc...
Yeah, I think those oldschool for loops should be avoided. Good thinking on the splicing; my first thought was to do solution.forEach((n, idx) => newGrid[Math.floor(idx/9), idx%9]=n) but that still uses idexes unnecessarily
I think it would've been better to use a ref to read the content when required and not triggering a render each time the user writes a number. It would probably not be a problem here because it is supposed to hold a single number but when your using the input for a long text the lag is pretty noticeable as you press the keys faster.
Only thing is here you are starting with the UI. The logic of how this works (state manipulation) is separate from the view (grid). It would be good showing that process as that is a much more professional practice
It doesn't matter where you start as long as the end goal is the same. Every person's brain solves problems differently, and some people like to solve the visual aspect of the problem before solving the logic. "much more professional practice" is a snobby view point imo.
@@WebDevCody When I say professional I didn't mean it to sound snobby. And people do solve things in different ways. But it is also true that there are multiple things to solve and it's a good approach to identify them and consider them separately.
This is not a good idea to change nested arrays like "array[i][j] = value". You still mutate your state which should be immutable. Kinda a proper way would be like this: ``` const newArray = [...array]; newArray[rowIdx] = newArray[rowIdx].map((val, colIdx) => colIdx === _colIdx ? newVal : val); ```
Two things right off the bat - it’s pronounced SU DOE KU - please tell me you already knew that the puzzle was 9x9 before recording this video and that you only counted the cells to teach viewers
Bro a 38 min that feels like 15 min, you explain so well. Good job :D
The input has an inputMode prop that you can set to numeric, this will avoid those arrows that show up on inputs where the type is set to number and you'll still only be able to enter numbers in the input.
awesome thanks for that info!
Sadly, we hav Explorer 2.0, *cough* safari *cough* that doesn't suppoert that
Hello! I am truly grateful for these videos. I have had finished the odin project but had been scared to apply for jobs, your channel and you really help me get through that fear. Keep these challenges coming!!!
Also I must say that to whoever might read these, If you are someone who is bored at watching videos that teach "useState in React" kind of videos, watching this channel and experiencing his thought process will help you better than watching countless udemy courses. You are so through and to the point and this 40 mins of video basically feels 10 mins!
Thanks for watching, I’m glad you enjoy my content!
@@WebDevCody You're also my favorite React content creator lately, by a long shot. I love watching the live coding/refactoring and the thought process is just pure guidance for us juniors. Keep up the good work Cody, thanks a lot!
Great video, I wasn't aware the debugger keyword existed, that will come in handy. The proxy trick was also really cool I'll have to keep that in mind if I ever need it.
Good stuff and thanks for including the "behind the scenes" troubleshooting of the API.
Those kinds of videos are awesome. They are literally better than clone projects. Because we can understand the basics of .tsx, and gives us a better understanding when we are using real-life scenarios or side projects. I hope you keep doing interview content
your live coding is like watching short detective story and good for quick lunch
I think the way you wrote the setGridValue function is incorrect, because you are actually mutating the state directly. For example:
const x = [[1,2],[3,4]];
const y = [...x];
y[0][0]=5;
console.log(x[0][0]);
prints 5 insted of 1. This is because 2d array is array of refrences to arrays, so by doing [...x], you just copy only references to those nested arrays but not arrays themselves. I think what you need to do is:
const x = [[1,2],[3,4]];
const y = x.map(a => [...a]);
y[0][0]=5;
console.log(x[0][0]);
Mutating state like you did can lead to very hard to detect bugs.
Am I right or am I missing something?
Sounds accurate. It’s probably better to make sure I do a full copy of the nested arrays
There we go! Thanks for hearing me out! Advanced next, please!
I’ll try to think of a more advanced challenge.
@@WebDevCody I'm not sure how advanced it is. But I think it will be good to see some sorting or path finding algorithm visualizer.
@@tomiis4 jesus, i'm a cs student and i will never be able to do that on my own
Never knew about the `new Array` method, and never used the debugger (which is a shame, and I should learn it).
And the proxy thing, that's extremely helpful.
Learnt so much in 40 min, your videos are definitely worth the time, Thanks :)
nice I learnt a lot, you are my new fav list channel
Thanks man!
This was cool and well explained. Honestly, AdventOfCode is also a really good practice for interview question and its a fun way to mix coding and the festive month. In my experience interviewers fail to give you practical examples like you've shown and still give these hardly ever used algorithm type questions.
Binging these videos for an upcoming full-stack interview, solid work man
how did the interview went?
@@imaginaryworld599 Rejected
Did u get a job until now?
yes@@PsychoDude
Enjoying these vids, subscribed for sure!
COOL project, very useful for improving in many things. I'm a React developer too
You teach not only about the sudoku but also teach us how to use proxy 😃
gods know how meny years i had this cors problem
Can you please implement drag and drop inside a grid in react project? And make sure the scrolling behavior remains same on every screen.
Nice video with some cool concepts! Though, is it me or is your UI rendering the rows as columns? At 16:23 in the vid you are editing UI row 1, cell 6, but in your data model its updating row 5 cell 1? And isnt that the reason you lateron have to swap the rowIndex and colIndex?
Yeah something is a bit backwards
i am coding my own sudoku currently over on github ( github -> bloodiko -> sudoku (also on github pages))
a good solution for the spacing issue of the grid is to use "repeat(9, min-content)" making it possible to even dynamically adjust cells based on screen hight later on.
(but overall my sudoku is not that advanced yet, and my code probably massivly overcomplicated, but i tried what i can do.)
Also: Keep in mind that spread (...) will only apply to the outer array (row). not the inner array(col/cell) this makes it not totally new, but just partially new with cols/cells still beeing references.
that's good info, css is my weakest skill, so there is a lot of I forget exists when doing flex box and grid layouts. Yeah the ... will remain the same references to all the elements, but provide you a new array reference, which is fine in this case. I just wanted to tell react to re-render, and providing it a 100% brand new array is not necessary to achieve that.
@@WebDevCody true
I needed it in some cases, that's why I mentioned it.
Also I didn't know this min-content css stuff myself, my brother showed me, and helped me there with my project which was cool.
This is awesome! I was just doing a project with a grid
gotta say this is my favorite react contents
Nice content! Looking at the response, wouldn't it simpler to use 1 dimensional array? 🤔
can someone tell me how to make shorts where I can show my browser and code in the same time I find it really very difficult
I've been practicing and watching these react interview questions for a while now, incase I want to make a switch to a new company/job. However, I'm coming to realise there are quite a few companies out there who don't even test you on React at all. Even for a front-end engineer role, topics on system design, Leetcode (med to hard) and maybe a basic front-end test in vanilla JS are most likely to come up. I know this is more prevalent in FAANG companies, but could you share more insight on this topic? Are newer more modern small/mid sized companies still following this practice?
From what I've heard from my senior engineers, there are definitely still some companies out there who don't test you on JS frameworks and assume from your knowledge of DSA and vanilla JS you are competent enough to pick up any JS framework.
That is probably true. I haven’t done real interviews for react positions in a while so idk what the standard is. The title is a bit more of a click bait but the challenges are still good to practice doing. I do think being able to demonstrate you can build something basic in react does sell yourself as a developer. If a company is confident in hiring someone who can reverse a binary tree, then that’s up to them. I personally don’t want someone to spend the first month of their paychecks learning react if I was running my own business
@@WebDevCody Thanks for the reply and your insight. You make a good point about paying someone to learn react in their first month. Keep up the dope content, I've been watching every single video you've put out for the last few months
I have had so many problems with referencing the same object with Array.fill() that I immediatelly saw your mistake and was like "Oh no" xD
what extensions do you use for those inline error hints and colored block markers? also i like your stuff :)!
error lens and rainbow indent
Hey, what's your thoughts about using declarative methods instead? Do you think it would look better for the interviewer? ex: instead of for...for... using response.split(''), grid.push(response.splice(0, 9)) while length>0, etc, etc...
Sure, either works. Idk about looking better or not, those are non important implementation details to me.
Yeah, I think those oldschool for loops should be avoided. Good thinking on the splicing; my first thought was to do solution.forEach((n, idx) => newGrid[Math.floor(idx/9), idx%9]=n) but that still uses idexes unnecessarily
And the other way at 32:00 could just be grid.flat().join('').replaceAll('0',.'')
@@jollyjoker6340 Yea. Declarative programming was the most beautiful thing I found out in 2020, makes code so more readable, right
@@caick7 I want to avoid potential bugs too
You deserve more subscribers
Cool tut especially using the debugger to debug
Why is it being transposed, that's my only question. It feels bizarre to me... is it because of CSSgrid?
Awesome content. Did you get Lasik by chance? No glasses this time 🤓
nope, I just left my glasses down stairs and I was too lazy to walk back down to get them
@@WebDevCody Haha nice. I wouldn’t be able to see without mine
Great video thanks!
I think it would've been better to use a ref to read the content when required and not triggering a render each time the user writes a number. It would probably not be a problem here because it is supposed to hold a single number but when your using the input for a long text the lag is pretty noticeable as you press the keys faster.
Yeah that might be a good useCase for uncontrolled inputs
Interesting and educational, thank you.
Only thing is here you are starting with the UI. The logic of how this works (state manipulation) is separate from the view (grid).
It would be good showing that process as that is a much more professional practice
It doesn't matter where you start as long as the end goal is the same. Every person's brain solves problems differently, and some people like to solve the visual aspect of the problem before solving the logic. "much more professional practice" is a snobby view point imo.
@@WebDevCody When I say professional I didn't mean it to sound snobby. And people do solve things in different ways.
But it is also true that there are multiple things to solve and it's a good approach to identify them and consider them separately.
@@MarkJKellett yeah that makes sense.
styling to remove default arrows on number input
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
This challenge is good for interview question.
Good job babe!!!
I don't know how to make good commits 😞😞😞😞😞
This is not a good idea to change nested arrays like "array[i][j] = value". You still mutate your state which should be immutable. Kinda a proper way would be like this:
```
const newArray = [...array];
newArray[rowIdx] = newArray[rowIdx].map((val, colIdx) => colIdx === _colIdx ? newVal : val);
```
Amazing!
Amazing
I just realized that you wear a little tiny hat, if you catch my drift. Why does TH-cam keep recommending so many of you to me?
No clue what you mean 🫡
@@WebDevCody I can't say it directly for obvious reasons, but let's just say your last name gave it away.
@@lonnybulldozer8426 nah, I'm Christian, not that is makes a different when teaching coding. One can't choose his last name 😎
@Cody You and Mr. Hotz, eh? I'm noticing a trend here. Also, if you can't choose your last name, tell that to John Stewart.
Should be used flat map
damn. u made it soo complicated. haha.
Two things right off the bat
- it’s pronounced SU DOE KU
- please tell me you already knew that the puzzle was 9x9 before recording this video and that you only counted the cells to teach viewers
I’ll leave that a secret just for you
@@WebDevCody ❤️ 😂
Says intermediate. Console.logs solution. Takes almost a half hour to solve it.
Not sure what your point is?
Spread is a shallow copy.
I default to json.parse(json.stringify(obj))
Hey
Instead of parseInt(e.targer.value) you can do e.target.valueAsNumber
Oh nice never used that but that’s cool!
Thats cool, does that also handle the NaN cases or would it throw an error?