React TypeScript Tutorial - 5 - Advanced Props 

Use coupon code CodevolutionRU-vid for 100% off lifetime discount to your subscription at www.taskade.com/billing

Superb Video, No rubbish, No clickbait just Pure Content, Thanks for Teaching me React and Nextjs.

Perfect Course ! your voice so clear and very easy to understand. thanks

These videos are so good! I'm a Python/Django developer who's moving to NextJS. And I found TypeScript to be one of the ideal ways to write code in NextJS. These videos are helping me learn just enough in-depth fundamentals of TypeScript.

VIshwas you are incredible!!!!. You present the content really well and planned in each step.

Great videos in the typescript playlist!! Thanks for your excellent teaching! BTW, in 2022, children is no longer required as an explicit prop: // The best way to properly type children is to use built-in type FC. import { FC } from 'react'; // If the only prop you expect is children: const MyComponent: FC = (props) => {}; // props includes only children property // If you want to include more props than just children: interface MyProps { name: string; } const MyComponent: FC = (props) => {}; // props includes children and name properties

Waiting for the next video on React TypeScript Tutorial. These were amazing well explained and thanks for doing this.

Don't stop bro! Nowadays is a mainstream! Thanks

Your guide is very easy to understand. Thanks so much

Thank you very much. It's Very Useful to develop React Apps. Your voice is just amazing

awesome, I learned a lot. thanks!

Thank you for the great videos!

This is great content...Thank you

Superb videos 🙏🏼

Great tutorial but for the status type I would recommend using an enum instead of union of string literals.

its true when they said typescript is superior, fascinating!

1. declaring possible props i.e specific strings @ 3:00 2. children: React.ReactNode for passing components as children @ 6:23 3. optional prop @ 8:11 ex. messageCount?: number Overview: @9:18

So good, thanks a lot!

i would recommend to have other payment methods for support. i.e. upi, patron. many people don't use paypal.

Great series so far this is really teaching me a lot! One question though, how does the syntax work when assigning a default value of 0 to messageCount at 8:37. You set messageCount = 0 but when a prop is passed it takes the prop instead and you don't need to do props.messageCount anymore but just messageCount instead? I've never seen this before.

Thanks

Amazing

Thanks for this tutorial. One questin for the status example, why not use enum?

Quick question, in app.tsx, how does Status only have this: but heading and oscar have ...... and ....?

Awesome!

That is awesome...

I like how the strategy is to write normal react code and then do smth to fix the errros

Kinldy don't forget to make tutorial on Redux toolkit with typescript

For the children props part. Why does it work when you are not using the text as a prop of for example, instead of

Doubt: When I do this and the output in the ui is coming directly from the Heading component and not from Heading component being passed to Parent component as prop (---{props.children}---which is heading component in this case) UNDER PARENT COMPONENT Is it supposed to be that way or am I missing something in the concept?

amazing

Best video

And what about JSX.Element instead of ReactNode: interface OscarProps { children: JSX.Element } export const Oscar: React.FC = (props) => { return {props.children} };

Awesome

is that example of children component props still available? Got some errors

const { message=0} = props not working. for an optional value its giving unefined in a TS online compiler

You can also use propsWithChildren generic type for children

Can someone explain why 'children' was used in the HeadingProps? Seemed to come out of nowhere

instead of this type Childerns = { children: React.ReactNode; }; even if i do type Childerns = { children: any; }; why it is still working both are same ?? (7:04 vedio length)

GoodJob!

🙏👍

Great course so far. Not sure if others are running into issues when updating the Greet component to default to zero upon updating to make it optional? Not sure if it is the best way, but got around it with doing this: const Greet = (props:GreetProps) => { let mCount if( props.msgCount === undefined) { mCount = 0; } /* The rest of the code... */ When trying to de-structure as the current video shows: const {msgCount=0} = props.msgCount; I'm getting an error something like: Property 'msgCount' does not exist on type 'number | undefined'. FYI . "typescript": "^4.1.2", I'm assuming my typescript is the latest i just installed today fresh, didn't specify a version so i'm assuming i'm on the latest? Also to be complete did try: npm install -g typescript@latest no change :( Just in case others run into the same issue. You can use my old fashion tried and and true way :)

Status not working... why?

❣❣❣💯💯💯

You sound like freeze youtuber, am I wrong ?

😋😋

Sir are you Indian ?? If yes please make vedio in hindi 🙏🙏🙏