Learn React Generic Components In 6 Minutes

[@AcromondX]

I will freak out the day Kyle stops shaking his head while speaking. Good stuff BTW!

[@lalithrockz]

Hey has some Indian in him, I guess.

[@AkshayPadinjarethadathil]

I can not stop noticing it from now.. 😐

[@FrontTech-qu3pe]

@@lalithrockz Hey that explains his coding skills 😂

[@annetannet6046]

I didn’t notice it until I saw your comment LOL BTW, great explanation! Always amazing! Thank you, Kyle!!!

[@omega.developer]

Bravo, I learned an advanced topic today. That makes my day. Thanks Kyle bro..🎉

[@lifeofcode]

I do this often lately, its made my code so much more reusable. instead of having strict types for components.

[@latanoel]

I've been using this approach for a while. But for rare cases where components are reused for different source data types. Nice one Kyle.

[@vetrivendhan6122]

Finally someone speaks my point. I really feel happy here. ❤

[@rendezone]

For those negative comments about passing generic, albeit uncommonly necessary, it makes some components more reusable in some instances, where typing isn’t well inferred or conflicting. I admit is rare but it is useful. If you want to avoid your users passing a generic, create multiple components that do it for them

[@MrJettann]

It's cool, Kyle! Want to see more advanced tricks and tips in react! But where to use such components? Usually lists contains not only primitive values, but other components and more difficult structure in general?

[@shivshankarprasad3427]

Thanks for the clarification ❤

[@Dameng-nb6wc]

Just found the solution: {data.map((d) => ( {getRow(d)} ))} would treat JSX.Element as a single element which can avoid the error of Type 'Element[]' is missing the following properties from type 'ReactElement': type, props, key. thanks kyle ~

[@aqibmalik6313]

nice work kyle after a while

[@JarheadCrayonEater]

From a SSE, please use the convention of "T" before the generic type specifiers. It removes conflicts with other type names and also can be carried over to other languages, since it's widely used.

[@prathameshedu]

i am exporting type IDislikeThis

[@WebDevelopmentWithSS]

Thanks a Lot, Bro.❤❤❤❤❤❤❤❤

[@KhaledGhallabPro]

My beautiful friend.. I have a problem in one of my files in React because of this wonderful lesson I thought that maybe you have a solution for it.. But I do not know how to send you the file to review it and maybe the problem will be solved. Once again I really appreciate what you do for developers. Thank you

[@rohitpraks]

I’ve always been curious, how much money do you make a year?

[@MEZOMEZO2011]

Why?

[@DaliborHomola]

Thanks a lot, really helped me ❤

[@SeanAlunni]

I thought you were clickbaiting with that syntax, It's crazy that you can do that!

[@testingaccount-x9b]

If this seems weird, please check his other video on generics. It might help you.

[@mahoneg]

As an old C++ programmer, I like T from C++ templates. Hmmm I wonder if that is where the T comes from. By the way, Kyle helped me understand React and JS a lot.

[@chaunceyphilpot3986]

As some others have stated, please use T as a generic type. It's the universal symbol for it. If you put something like "GenericListType" I'm going to assume that's a real type somewhere.

[@mysterry2000]

No. Won't even use i in my for loops either 😤

[@aleksander5298]

You are retarded or what? Skill issue? There is nothing worse than using dumb one letter symbols for generics, maybe start naming your variables like a or b? 🤡

[@mohammadsharifulislam1644]

Thank you so much bro !!.

[@anuragpramanik6095]

What's the font you are using?

[@geforcesong]

How this generic type can work with React.FC? I prefer this way to define the component, but didn't find a way of adding generic. e.g. below is not a valid syntax. export const Editor: React.FC = ({ runId }) => {

[@岳川-o1h]

The arrow function component uses generic T, you can use it without FC, which is the way I usually use it and just define Props. export const Example: FC = forwardRef((props, ref) => { return ( { // {name: string;age: number;id: string;loves: string[];} console.log(item); }} /> ) }) interface EditorProps { list: T[]; itemCallback: (item: T) => void } export const Editor = ({ list }: PropsWithChildren) => { return ( {list.map((item) => { return {item.id} })} ); };

[@nicobost1950]

if you squint your eyes, you can see that Kyle from 5 years ago traveled forward in time and made this video, that's why he hasn't aged a single minute

[@tbm1895]

Good explanation : )

[@Nusab33]

Hey Kyle, do you have a discord server? The one given in the description is expired.

[@ValentinJasonGaje]

Can we have more tutorial about Typescript in NextJs or React :)

[@parubok]

Thanks!

[@WebDevSimplified]

You are very welcome!

[@Monstermash355]

Not a fan of at all, there are almost no cases where you need to do this, should have an extended generic instead, or just

[@master.sanchit]

Not even fan of TS infact what is shown in the video as complicated concept actually it's very simple, you can pass key and item in prop it was all not needed IMO. and code will then look simple

[@coder_one]

I agree - I've been programming for many years in TypeScript and React and have never had the need to combine with generic components according to the KISS principle.

[@harleyspeedthrust4013]

@@master.sanchit code will look simple but won't be for the guy who just joined the team and has no idea what type anything is because you didn't use typescript. congratulations, you've just lost hundreds of man-hours because the new guy has much more work to do before he can be productive. never mind the numerous bugs that you introduce every day because you didn't want to use typescript. you've successfully converted a small amount of potential time spent fixing type errors into a large amount of real, billable time spent fixing bugs that were probably seen by customers. by definition code is not simple; if it was then we would all be out of jobs. and yes KISS is important but these days KISS is grossly misunderstood and overapplied in such a way that it resembles the "enterprise" clean code hype of 15 years ago. both KISS and clean code have their gems of wisdom, but if KISS is your only principle and the only thing you care about, then you're doomed to write fragile code that either doesn't work or can't be extended. and there's little worse than a developer who thinks everything is or should be super simple - this kind of developer can drastically slow an otherwise productive team.

[@allone258]

@@master.sanchit and maintenance hell right?

[@chidiorji]

I did find that pattern very helpful when building reusable select components with react-select. It allows to pass the actual type of data you want to send to the generic selector component

[@Dameng-nb6wc]

Thanks for sharing, but I got this error: Type 'Element[]' is missing the following properties from type 'ReactElement': type, props, key. May I ask for some help?

[@yatinarora1252]

Did you followed the same code

[@Dameng-nb6wc]

Hi ​@@yatinarora1252 I just provided my potential solution below.

[@Shyam_Mahanta]

Nice one 👍

[@viet.khoaiegg]

Thanks a lot, now I can get rid any haha

[@akinloludavid3]

never seen anything like this before

[@evalaviniabucur1789]

I'm just curious who Sally is :))

[@vivekkaushik9508]

Prob his girlfriend. You jealous? 😝

[@evalaviniabucur1789]

@@vivekkaushik9508 he's married, from what I remember. But, yes, I was actually asking if that's his wife's name :P

[@adityaanuragi6916]

Yea I was wondering the same, I've seen him use Kyle and Sally many times before, I think it's his wife's name but I could be very wrong

[@WebDevSimplified]

It is a random name actually. It was the first name that popped into my head during one of my first videos and now I just always default to using it. I don't even know a Sally.

[@evalaviniabucur1789]

@@WebDevSimplified thank you! :))

[@andrevenancio]

What if you want to pass an array of different data types? Let’s say an array of components all with different props to render a side panel based on data? I tried generics and couldn’t get it to work 😅

[@yatinarora1252]

Nice question need to try it tho

[@ikbalnayem8914]

Great

[@irfansaeedkhan7242]

i want to buy your course but its too much expensive for 3rd world country , kindly add that feature which gives discount for 3rd world countries if possible, I mostly buy through that, thank you

[@WebDevSimplified]

I already have this implemented. All my courses offer PPP discounts to hundreds of countries. If your country qualifies you will see a discount code at the top of the page. If you don't see the code make sure you disable any VPN you have running as that will prevent the code from showing.

[@krzysztofrozbicki1776]

Seems like solution for problem that Typescript created. Longer i use Typescript and plain Js the more i hate Typescript and appreciate the non type of js

[@Kairos26]

x2 speed i learned it in 3 mins 😎😎

[@unknownguywholovespizza]

Old joke 🥱

[@thekaka6520]

Please slowly, take a breath dude relax to explain

[@28-huyop93]

🎉🎉

[@coffeemakir1977]

Continually making the code more and more verbose, remembering where and how things are added, oops you forgot one thing spend time figuring it out or look it up. That is what i hate

[@teenspirit8714]

so u fucked up static typing and you glad of it? grats, bro

[@mrsteven7100]

Noooo I don’t believe any big open source or component library would use this pattern…

[@blackwhitekeys2523]

Higher order components How to render text, Radio, select, checkbox, all components dynamically with the help of higher order components?

[@gidmanone]

It's not worth it man. Horrible horrible syntax. It interesting that the main use of Typescript is for auto-suggestion in the IDE.

[@NoobaLV]

I’ve commented before but ill just reiterate, this is the most educational modern React channel on the site right now

[@vivekkaushik9508]

Bro, not cool you just deleted my detailed comment explaining and extending the topic. Not very genuine of you. I'm saddened and my night is ruined.

[@WebDevSimplified]

I haven't deleted any comment. Most likely KZbin automatically deleted it which happens often with comments containing URLs.

[@OCEMTechZone]

Great