Yes, that's exactly where I would use that as const. I've got a team which margins pathings, et cetera, set up as tokens. And that way I know that something is not an array of numbers, which is by the way, I didn't show that, but let me undo this, but that's pretty nice. If I say I want to show something, if I say, data is an array and I specify one comma, comma two, for instance, comma three and I check it today that you can see data really is only the numbers one, two, and three. So not just an array of any number, it's very explicit about what's possible there. And without const, then you just get an array of number. So very useful.
Okay, let's go and do this exercise. So change the getConfigItem function and use the generic type to properly type the section and the item, which will automatically properly type the results as well, which is really nice. And a really powerful typescript feature which will save you lots of times and we'll actually do some more similar things like this in a moment with React components. But first, let's go and do this exercise. So we'll now open up the breakout rooms and I'll see you all back here in a few minutes.
Okay, that's everyone back, so let's go to the next exercise. So using generics in a function like that is really neat and really powerful, but it turns out you can do exactly the same with React components. The setup is slightly more work, but it's a very nice and powerful feature and let's actually go and explore how that works. But before I do, I first want to show you the problem we're going to solve again. So I've got two forms here. I've basically got a component which will create a little form based on the properties of an object passed in, we'll basically loop through that and create inputs for that. Have a little submit button and then provide or let the, or at least let the developer, I should say, provide both to object to use and whatever should happen at the submit. It's like I've got first name, last name here and the submit, it shows me the first name and last name. So the data is there, but for some reason when I'm doing something with it, but I'm getting John and undefined. Then of course, as we know I've got no compile errors. Kind of get the same here, working with an address. So everything looks good. I've got a street house number city. But when I render that as a string, I get undefined main street undefined new York instead of 123. And we don't need last pass here. So how can we go and fix this? The form being rendered is this. It's rendering a generic form component, passing in some values, first name, last name, John Doe, and then on the submits, it's rendering or calling into that alert function where we just saw the pop-up, and it's basically using values, first name, last name. But if I hover over, you can see the values is of type any. And last name here is with lower case n and up here with an uppercase N. So looks similar, but there is a difference in case, which is why this renders as undefined. And the same here, I've got the same form again, passing in values with street, house number, city, but house numbers with a capital N, and here I'm using it with the lower case N, but again, values is type any so no compile errors, nothing. And I really want the values being provided to my submit function, to line up with whatever I passed into that initial values group. If I go to the generic form component, it's kind of a simple react components. It takes a props, which is an initial values of any, and on submit, a header, and it basically loops over the items and renders those. Nothing very spectacular, pretty simple. But basically I want to get rid of these two anys and align those. Well, we could do the same kind of trick we did before, use generic. So I'm gonna say, this is of type T-Data. And then, here, I'm gonna say this should be a T-Data and this should be the same. So now in this structure, I've kind of lined these up that the initial values and the values passed to the on submit are the same. But now props is a dependency on a generic type, and in here that needs to be declared. So I could go in here and say, well, that should be an object of some sort or maybe something else. And actually that needs one more bracket to be correct. And actually I get a compile error here but we'll ignore that for a moment. The thing though, is like I'm specifying a type here but I don't really know the type here. Overhere, I know the type where I'm saying, well, this is the type which I should use. And in the case of the user, this is type I should use. I can't really specify that in here because I don't know, it depends on how this component is used. And that's where react.fc actually falls short. So in this case, I want to get rid of react.fc. Turn this into a normal component. So we'll do that with a quick refactor. Or sorry, normal function, I should say. And now say, this should be type props. Some type of value. Well, this needs to know ddata, where does ddata come from? Now, because I've got a regular function, I can specify that over here, which I couldn't with the generics. So now if I go back here, I can see I get a compile time here saying, well, last name with a lowercase n doesn't exist. Did you mean last name with a capital M? Yes, I did, and it's perfectly happy. And down here with house number, I get exactly the same. The old JSON's number to a capital N. And it's perfectly happy. So values is the correct type. Suppose I add postal codes to it. Postal codes like that. Now in the values for the on submit, we also have that postal code. So these two types are completely aligned. So looks good, except we still have compile error here. In generic form, we still have a property problem saying that values isn't exactly what it likes.