React TypeScript Tutorial - 18 - Component Prop

in this video let's learn how to pass a component as a prop with react and typescript for this video as well i've set up some code to help us get started in the components folder i have created a new folder called auth this folder contains three files login.tsx which is a simple component that says please login to continue we also have profile.tsx which is a component that says private profile component finally we have private.tsx which is a component that controls whether a user can view a component or not based on whether they're logged in and the component receives two props which have destructured is logged in and a component that needs to be invoked if the user is in fact logged in in the jsx we check if the user is logged in and invoke the passed in component prop if the user is not logged in we simply return the login component asking the user to sign in first we need a reusable component prop here as the component could be any component we want behind a login screen our task now is to ensure the code plays nicely with typescript login and profile components don't have props or state so don't need any types let's simply focus on private.tsx the component accepts two props is logged in and a component so at the top let's add the private props type type private props is equal to an object and we have is logged in which is of type boolean we then have component as a prop which can be any react component so what is the type we can specify well it turns out we need to use a type from the react library and the type is react dot component type we can now specify this as the type for the props so colon private props and when we do that typescript is happy this is how you type a component prop but there is another small detail that you need to learn at the moment the profile component doesn't have any props of its own let's add a name prop so type profile props contains one prop called name of type string within parentheses the structure name from props and the type is profile props we can render it in the jsx private profile component name is props dot name we can now go back to private.tsx and pass in the name prop so component name is equal to vishwas when we do that typescript is not happy again it doesn't know the component can accept the name prop to fix this we have to export the profile props type from profile.tsx import it in private.tsx and then after react dot component type within angle brackets specify profile props this will fix the error also i like to pass props only in lower case this is going to be component colon component and make the same change in private props as well now we can test this in app.tsx import and invoke the private component we can specify is logged in is equal to true and component is going to be equal to the profile component typescript does not throw any errors so if you have to pass in a component prop use react dot component type if that component itself accepts props specify the prop type in angle brackets thank you all for watching make sure to subscribe to the channel and i'll see you in the next video

Channel: Codevolution

Views: 931

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, Component Prop, Component Prop with React and TypeScript, React TypeScript Tutorial on Component Prop

Id: qvdnTfyv7y8

Length: 5min 22sec (322 seconds)

Published: Mon Sep 20 2021