How to use Props in React with TypeScript

Hello, my friends and fellow developers. In this video, I have talked about how you can use props in React with TypeScript. Because we are using TypeScript, we have to pass the types of the props which is one of the best parts of using React with TypeScript

Let me know in the comments below if you want more React and TypeScript videos or any other videos. And like the video, if you like it.

Other Tutorials:

Connect 🔗 :

🎥 Gear I use:

VS Code Theme used: GitHub Theme

Suggest, ask doubts in the comments and share these videos to help!
Thanks for Watching!

[nikhiljain]

Loved your video brother. To the point, nothing less and nothing more!!

[alexthewebdesigner]

Very thorough explanation. Thank you Sir!

[dmytropasenko]

Man, you are the best! Thank you from Ukraine!: 3

[salailel-nk]

More typecript and react content please

[LeFlaneurFilms]

Great and useful content. Thank you very much!

[majdeddine]

hey max programming, what are the configurations of sound you did in OBS studio ?

[ashwinnair]

This was great but it would have been a bonus on how to pass a function as props in TS. Anyway, great content. :)

[santra]

Hey Max! Do you recommend learning typescript to someone like me who is aspiring to be a MERN stack developer?

Will it be useful for me?

[RaphaelRafatpanah]

Nice video! Would you always use an interface (instead of the type keyword) to define the types of props? Also, would you also use React's prop types to help provide runtime validation for those consumers of your components who aren't using TypeScript?

[sundeeppeethala]

Hey Max, Can you do some projects on React with Typescript??

[zainabazarbahram]

why do we have to use props instead of giving inputs? I don't get the difference?!

[smartgowthamrazer]

//Hi Bro for boolean, its working bro.
// Instead of true or false we can approach like this (yes or no).


import React from 'react';
import NewComponent from './NewComponent';
import './App.css';

function App() {
const age = 25;
return (
<div className="App">
<h1> Hello world</h1>
<NewComponent name={"Gowtham"} age={age} isAdult={age>18?"Yes":"No"} />
</div>
);
}

export default App;



import React from "react";

interface Props{
name:string;
age:number;
isAdult?:boolean|string;
}

const = ({name, age, isAdult} )=>{
console.log();
return(
<div>
<h1> Name:{name} </h1>
<h1> age:{age} </h1>
<h1> isAdult:{isAdult} </h1>
</div>
)
}
export default NewComponent;