React TypeScript Tutorial - 5 - Advanced Props

welcome back everyone in this video let's take a look at a few advanced types when passing props to a component for our first type let's consider a status component in the components folder i have status.tsx for the jsx we have three h2 tags loading data fetched successfully and error fetching data our work here is to conditionally render only one of these statuses depending on a prop passed in let's assume the prop is status and can either be loading success or error let's begin by defining the prop type at the top type status props one property called status of type string now on the status component we can specify props of type status props we can also restructure the jsx to be let message if props dot status is loading message is equal to loading similarly else if props dot status is equal to success message is equal to data fetched successfully else if props dot status is equal to error message is equal to error fetching data and the jsx can be one h2 tag that renders the message in app component we can import and invoke the status component if no prop is specified we get an error that status is missing so let's add it in status is equal to loading and now the error is gone we can also set status is equal to success or error now this works fine but we do have a problem our message can handle only a status of loading success or error the status type though is any string so we could pass in a completely random string and typescript doesn't flag it as an error to fix this we can use a union of string literals as the status type so status is going to be either loading or success or error now if you go back to the app component you can see we have an error type asd asd is not assignable to type loading or success or error this as you can see is very useful all right for our next type let's take a look at the children props which can be passed to a react component for this example i have two files we can work with let's first take a look at heading dot tsx the component renders a placeholder text as you can see what we want to do is invoke this heading component by passing in some text between the opening and closing tags so in app.esx heading and in between the tags placeholder text when we do this though we see an error type children of string has no properties in common with type intrinsic attributes luckily for us we see the solution right here let's go back to the heading component and add the children prop type so type heading props is going to have one prop called children of type string and within parentheses props of type heading props and the text is going to be props dot children if we go back to app.esx our error is gone now another variant of children props is when the child is another react component if we head over to oscar.tsx we see a heading that says oscar goes to dicaprio instead of using the text we want to use the heading component but that should be as children props kind of a contrived scenario but it serves the purpose so in app.tsx import and invoke the oscar component so oscar and in between the opening and closing tags we want to be able to pass the heading component so heading and the text is oscar goes to dicaprio when we do this we get an error so let's go back to oscar.tsx and fix this and the question is what is the type of a react component there are a few types you can specify but the safest bet is react dot react node which is a type provided by the react types package so at the top type oscar props we specify one property called children which is set to react dot react node now if you're using react version 16 make sure to import react at the top i am using react version 17 and we don't have a necessity to import react in each file this type by the way is from the at types react package and now that we have the props type we can specify props of type oscar props and within the div tag props dot children if you go back to app.tsx you can see that we have fixed the type error now passing react components as children props is pretty common so make sure you remember about the react node type from the react types package all right the last type i want to discuss in this video is the optional type sometimes it might so happen that a component prop doesn't have to be passed and for this example let's revisit the grid component in app.esx i'm going to import and invoke the grid component once again we specify the name prop is equal to vishwas and message count is equal to 10. you can also set is logged in is equal to false let's say there are no messages or zero messages and we don't want to pass in the message count prop if i remove it type script throws an error that we are missing the prop property message count is missing in type greet props the way we inform typescript that message count prop is optional is by including a question mark at the end of the prop name where we define the type so in greed.tsx message count question mark colon and when we do that our error in app.tsx is fixed and if you want to go a step further you can destructure message count from props and assign a default value of 0. so const message count is equal to 0 from props so what we are saying is if message count is passed in use that value if not use 0 as its value this is how you specify optional props for a component with typescript so these are some common advanced types you'll need when defining props for a component a union of string literals children prop children prop where the type is react dot react node and finally optional props make sure to keep them all in mind in the next video let's take a look at passing events as props to a component with typescript if you're enjoying the videos please do leave a like and subscribe to the channel i'll see you in the next one

Channel: Codevolution

Views: 3,340

Rating: 5 out of 5

Keywords: Codevolution, React, TypeScript, React TypeScript, React TypeScript Tutorial, React TypeScript Tutorial for Beginners, React with TypeScript, React with TypeScript Tutorial, Advanced Props, Advanced Prop Types with React and TypeScript

Id: zLyeWSfTMa8

Length: 9min 48sec (588 seconds)

Published: Tue Sep 07 2021