React TypeScript Tutorial – 4 – Basic Props
Video Title: React TypeScript Tutorial – 4 – Basic Props
In this video let’s take a look at a few more basic prop types i’m going to continue our work on the greet component from the previous video for our next step let’s convert the number of unread messages into a prop in greed props i’m going to add a new key message count
And set this to a number when i do this we see a red flag in our app component if you hover on the red squiggly line typescript is telling us that message count is missing as a prop please add it so now if i just type the letter m
Autocomplete to the rescue because of typescript so message count and let’s set it to 20. back in greet component we can render props dot and you can see the autocomplete once again helping us message count so this is an example of the number type next let’s take a look at a boolean type
We want the text welcome guest to be displayed the user is not logged in if the user is logged in we display the name and the message count so to the grid props add a new key is logged in and set this to the type boolean in app.tsx add is logged in
Is equal to false back in the greet component we can now use the ease logged in prop with the ternary operator so props dot is logged in we render the name and message count else we display the text welcome guest if we take a look at the browser we should see welcome guest
So this is an example of the boolean type let’s quickly take a look at two more types for our next component let’s look at the person component which i’ve created beforehand it’s a very simple component that returns the text bruce wayne which is first name followed by last name
Instead of the name being hard-coded i want a name object to be passed in as props and the name object should contain first and last as properties let’s see how to do that in app.tsx i’m going to import and invoke the person component i’m going to create a new object called person name
With first and last as the two properties i’m going to pass in name as a prop and set it to person name typescript is going to complain we haven’t specified the component prop type so back in person.tsx let’s define the type at the top type person props this is always an object
We have one prop called name which is in turn an object object contains first and last as keys which are of type string we can now add props within parentheses and specify the type person props in the jsx we render props dot name dot first followed by props dot name dot last
Typescript is now happy i’m not going to go to the browser as typescript doesn’t really affect what we see in the browser typescript is for vs code so as long as we don’t see any errors we are good so this is about typing an object prop
Next let’s take a look at typing an array for this example let’s take a look at the person list component which again i have created beforehand within the component we have a list of three names instead of hard coding it let’s pass them in as props
In app.tsx i’m going to copy paste an array of three objects each containing first and last as properties the const name list is an array of three objects and each object contains first and last as properties next i’m going to import and invoke the person list component and pass in
Names as a prop which is equal to the name list array typescript is complaining so let’s fix that in person list.tsx at the top we defined the prop type so type person list props and it has one key called names which is an array of objects the way we specify that is
Object literal followed by square brackets but this object itself has a structure we have first as a property which is of type string and last as a property which is once again a string we can now make use of props so within parentheses props of type person list props and within the jsx
We can now type props dot names dot map and we get access to each name object in the array typescript is smart enough to infer the type of the individual name object so when returning if i type name dot you can see it suggests first or last let’s return them both
Name dot first and name dot last we also need the key prop so let’s set it to name dot first our typescript error has also disappeared so this is how you work with an array but to be more precise an array of objects in our case
Of course you could have an area of strings numbers etc but this is pretty much how you do it to recollect we worked with the number type the boolean type objects and arrays some of the more simpler props that you tend to pass into a component
In the next video let’s take a look at a few advanced examples advanced of course from a beginner’s perspective i’ll see you in the next one
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Use coupon code CodevolutionYoutube for 100% off lifetime discount to your subscription at https://www.taskade.com/billing
better than udemy
thanks for the tutorial this very helpfull
Type script is now Happy
What about passing a function as a prop?
👌🏻❤️
why using an empty array after assigning the object values a specific value?
why does it seem odd to me that you coded the array object on the app.tsx is there any significance? if someone could explain please do…Vishwas thank you for all the videos your truly a gift that keeps giving!
Thank you so much, I got my solution in the minute 6:57 I wanted to pass an array of objects as a prop but I wasn't able to solve the error until now.
GoodJob!
Wonderful explanations as usual, sir!
Please, I noticed you are not using import React from "react" in the begining of your .tsx scripts
amazing'
Hi! thank you so much for this series and for all your work!! Not really about typescript but I wanted to know why not using default export ?
best
The return of Bruce Wayne! The og's know haha. Awesome video as always,idk how are you so good at teaching but it's so easy to understand stuff in your videos.
It seems to me that this course is very useful, thank u so much.
after watching this i don't watch use typescript with react
Thanks Vish, best tutorial. I think the key value should be the index parameter after the map item parameter.
Thanks, this is a great tutorial.
I have one problem: Every time , when I use an imported components, something wrong with te "children" props. Now I start every component with a "children: ReactNode" line in the type, but I dont know why does it problem in my project and why not in your
awesome
good job bro!
Thank you sir
Great so far, but I wish you had zoomed in your IDE's text so it was easier to read.
I think he is marvel fan boy 🥰
Every time we are passing props with proptypes as some name, Is prop destructure won't work here?
Wouldnt it be hard when we have to pass an array of objects with a lot of properties in it ?.
Excellent explaination 👍. Can we have project with this training? Like todo or CRUD application or more complex app. Excited to see more videos
awesome, looking forwards to the next video, I use typescript at work and this is really helping 🙏
Hy ! What about IProps and IState ?
How i defind {…rest} props in react typescript
Great tutorial I have ever seen on YouTube !!
❤️
Sir are you Indian ?? If yes please make vedio in hindi 🙏🙏🙏
Love you, Bro!