React TypeScript Tutorial - 4 - Basic Props

in this video let's take a look at a few more basic prop types i'm going to continue our work on the greet component from the previous video for our next step let's convert the number of unread messages into a prop in greed props i'm going to add a new key message count and set this to a number when i do this we see a red flag in our app component if you hover on the red squiggly line typescript is telling us that message count is missing as a prop please add it so now if i just type the letter m autocomplete to the rescue because of typescript so message count and let's set it to 20. back in greet component we can render props dot and you can see the autocomplete once again helping us message count so this is an example of the number type next let's take a look at a boolean type we want the text welcome guest to be displayed the user is not logged in if the user is logged in we display the name and the message count so to the grid props add a new key is logged in and set this to the type boolean in app.tsx add is logged in is equal to false back in the greet component we can now use the ease logged in prop with the ternary operator so props dot is logged in we render the name and message count else we display the text welcome guest if we take a look at the browser we should see welcome guest so this is an example of the boolean type let's quickly take a look at two more types for our next component let's look at the person component which i've created beforehand it's a very simple component that returns the text bruce wayne which is first name followed by last name instead of the name being hard-coded i want a name object to be passed in as props and the name object should contain first and last as properties let's see how to do that in app.tsx i'm going to import and invoke the person component i'm going to create a new object called person name with first and last as the two properties i'm going to pass in name as a prop and set it to person name typescript is going to complain we haven't specified the component prop type so back in person.tsx let's define the type at the top type person props this is always an object we have one prop called name which is in turn an object object contains first and last as keys which are of type string we can now add props within parentheses and specify the type person props in the jsx we render props dot name dot first followed by props dot name dot last typescript is now happy i'm not going to go to the browser as typescript doesn't really affect what we see in the browser typescript is for vs code so as long as we don't see any errors we are good so this is about typing an object prop next let's take a look at typing an array for this example let's take a look at the person list component which again i have created beforehand within the component we have a list of three names instead of hard coding it let's pass them in as props in app.tsx i'm going to copy paste an array of three objects each containing first and last as properties the const name list is an array of three objects and each object contains first and last as properties next i'm going to import and invoke the person list component and pass in names as a prop which is equal to the name list array typescript is complaining so let's fix that in person list.tsx at the top we defined the prop type so type person list props and it has one key called names which is an array of objects the way we specify that is object literal followed by square brackets but this object itself has a structure we have first as a property which is of type string and last as a property which is once again a string we can now make use of props so within parentheses props of type person list props and within the jsx we can now type props dot names dot map and we get access to each name object in the array typescript is smart enough to infer the type of the individual name object so when returning if i type name dot you can see it suggests first or last let's return them both name dot first and name dot last we also need the key prop so let's set it to name dot first our typescript error has also disappeared so this is how you work with an array but to be more precise an array of objects in our case of course you could have an area of strings numbers etc but this is pretty much how you do it to recollect we worked with the number type the boolean type objects and arrays some of the more simpler props that you tend to pass into a component in the next video let's take a look at a few advanced examples advanced of course from a beginner's perspective i'll see you in the next one

Channel: Codevolution

Views: 3,566

Rating: 4.9789472 out of 5

Keywords: Codevolution, React, TypeScript, React TypeScript, React TypeScript Tutorial, React TypeScript Tutorial for Beginners, React with TypeScript, React with TypeScript Tutorial, Basic Props, Basic Props with React and TypeScript, Prop types

Id: mDu54a5U3OU

Length: 8min 15sec (495 seconds)

Published: Mon Sep 06 2021