React TypeScript Tutorial - 5 - Advanced Props

📱 Follow Codevolution

Advanced Prop Types with React and TypeScript

[phantomknight]

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

[endthefed]

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<MyProps> = (props) => {}; // props includes children and name properties

[faisalzone]

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.

[YuriiKratser]

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

[SơnTrần-dp]

Your guide is very easy to understand. Thanks so much

[Wibu]

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

[ishanihewage]

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

[ajayagrawal]

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

[matthiasfendt]

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

[AL]

its true when they said typescript is superior, fascinating!

[davidschreiter]

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

[Prasanth_Venkatachalam]

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

[rahulvashishth]

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

[AndriusLau]

And what about JSX.Element instead of ReactNode:

interface OscarProps {
children: JSX.Element
}

export const Oscar: React.FC<OscarProps> = (props) => {

return <div>{props.children}</div>
};

[timacorn]

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

[Temp-pnlm]

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

[zakirbangash]

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

[rlm]

For the children props part. Why does it work when you are not using the text as a prop of <Heading> for example, instead of <Heading childrenprops="Placeholder text" you are doing <Heading>Placeholder text</Heading>

Because I see it works both ways, I'm wondering why?

[mayureshkumar]

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

[worstenbroodje]

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.