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.

Good stuff and thanks for including the "behind the scenes" troubleshooting of the API.

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!!!

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.

Enjoying these vids, subscribed for sure!

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

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

COOL project, very useful for improving in many things. I'm a React developer too

your live coding is like watching short detective story and good for quick lunch

This is awesome! I was just doing a project with a grid

Binging these videos for an upcoming full-stack interview, solid work man

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?

Cool tut especially using the debugger to debug

Interesting and educational, thank you.

Can you please implement drag and drop inside a grid in react project? And make sure the scrolling behavior remains same on every screen.

There we go! Thanks for hearing me out! Advanced next, please!

You teach not only about the sudoku but also teach us how to use proxy 😃

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?

gotta say this is my favorite react contents

Great video thanks!

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.

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.

what extensions do you use for those inline error hints and colored block markers? also i like your stuff :)!

Nice content! Looking at the response, wouldn't it simpler to use 1 dimensional array? 🤔

You deserve more subscribers

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

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

Amazing!

Good job babe!!!

This challenge is good for interview question.

Awesome content. Did you get Lasik by chance? No glasses this time 🤓

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; }

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.

Amazing

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

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...

damn. u made it soo complicated. haha.

Should be used flat map

Why is it being transposed, that's my only question. It feels bizarre to me... is it because of CSSgrid?

I don't know how to make good commits 😞😞😞😞😞

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

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); ```

I just realized that you wear a little tiny hat, if you catch my drift. Why does KZfaq keep recommending so many of you to me?

Says intermediate. Console.logs solution. Takes almost a half hour to solve it.

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