Generic Components with TS and React

Hello, my name is Ilya. I'm a staff engineer in security. 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 Nord security. It is a component that you may know for such products as NordVPN or NordLocker, or maybe you have used also NordPack, or maybe you 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 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 being able to render the items based on the data that we pass. But the data of the items can be very different. It can be, as in this showcase, it could be their vegetables or a list of characters of Game of Thrones characters in this specific example. So as we can see, there is a selected list as a small dropdown 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 genetics. 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 hardcoded, being predefined to just have an object of just an ID in object of IDs. And that is not suitable for us. And one of the possibilities how we can deal with it is to use the genetics. So you may have used the genetics in just regular typescript in functions or in classes or even in interfaces. And generic 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 this generator, then or less than signs. And put there a 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, right? 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 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 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 on to a syntax limitations that you may face when you're trying to write genetics. And that is you cannot use, if you try to use to try genetics in TSX files for genetic. If you try to write genetics for lambda functions, for error functions in.tsx files, then you can find that your typescript would would complain and saying something like syntax is not correct or something. And that is because the typescript understand this as a regular GSX syntax. And there are multiple ways how you can basically fix it. The first one is you can restrict your genetic to be to extend something like, for example, t extends unknown. We can see that now it's all green. All good. And another possibility how you can do it is to just convert your error function to a regular function. And in this case, you can see that the genetic that you passed is correct and the syntax is correct. Nothing complains. And all good. And then, yeah, small summary. So like what are genetics? The genetics 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 examples could be a select a drop down or it could be components displaying a list of items in a common way, which is which the shape of which is not defined or it can it can differ. And 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 and follow NERD security.