Generic Components with TS and React

Hello, my name is Ilya. I'm a Staff Engineer in ArtSecurity and today I would like to give a talk about what are the generic components and how to do them with React and TypeScript. And a little bit about the NerdSecurity. It is a company that you may know for such products NordVPN or NordLocker or maybe you have used also NordPack or maybe you've even bought our bundle and are happy with it. So our mission is to create a safe cyber future for people everywhere.

And regarding the talk, I would like to speak today to give you an explanation about the genetics on a practical example. We will try to build a selectable list and then we will jump to a small syntactical limitation that you may face when you're using, when you're building your components with genetics in React and TypeScript.

So let's start over. As an example, we would like to build a selectable list that allows us to basically take a list of items of various shapes and be able to render the items based on the data that we passed. But the data of the items can be very different. It can be as in this showcase, it could be the vegetables or a list of Game of Thrones characters in this specific example. So as we can see, the selected list is a small drop-down that at this point of time just renders a list of items basically that are being passed and we want to change that and we want to achieve that using the generics.

So if we're trying to render an item right now, we can see that the list of items is basically just an ID and that's because the type of the selected item is being like hard-coded, being predefined to just have an object of just an ID in an object of IDs. And that is not suitable for us. One of the possibilities how we can deal with it is to use the generics. So you may have used the generics in just a regular TypeScript with in functions or in classes or even in interfaces and generics is basically a parameter that you can pass to a type that would allow it to be generic.

So you can pass genetics to React components the same way as you can do it in functions by using these greater than or less than signs and put their certain name of the generic that you want to use. And then we want to move that over to our props so that we would pass it to other properties that we use, such as for example for the items. We want to use it for a selected item, for a rendering item and so on.

So, as well, we would like to still keep the shape of this object to contain ID. And in order to do that, you can use the extent with which we want to be a select item, right? So, this now allows us to, as you can see, we are now able to access to see what kind of objects, what kind of properties basically the object have that we passed to our selectable list. And we want to try out rendering something to see if it actually works. So, let's try with my label, and maybe let's put some icon that was accessible in here. And boom, now we should be able to see it in our application, but meanwhile I will also update the characters list. And character, good. And let's see. There are, of course, some some errors, but that's not a problem for us. So here you can see a list of vegetables and also rendered list of Game of Thrones characters. Good.

And then moving onto the syntax limitations that you may face when you're doing your, when you're trying to write genetics. And that is you cannot use, if you try to use to write genetics in TSX files for genetic. If you try to write genetics for lambda functions, for arrow functions in in dot TSX files, then you can find that your TypeScript would complain and say something like syntax is not correct or something. And that is because the TypeScript understand this as a regular TSX syntax. And there are multiple ways, how you can basically fix it. The first one is you can restrict your generic to extend something. For example, T extends unknown. We can see that now it's all good. And another possibility how you can do it is to just convert your arrow function to a regular function. And in this case you can see that the generic that you pass is correct and the syntax is correct. Nothing complains. And all good. Great.

And then, yeah. Small summary. So what are generics? The generics is you can use, you can make components generic when a component allows to operate the data that is passed to it without having a defined shape of the data. And such an example could be a select a dropdown or it could be components displaying a list of items in a common way which is, which the shape of which is not really defined. Or it can, it can differ. And the additional stuff you can, you can, you can also try, you can also use it for the form field components. And you can find a lot in various component libraries in general. Yeah, that's pretty much it. I hope you found something interesting and it was useful for you. And thank you.