Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
React Props
Loading...
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:00 In React, props, short for properties, are a way to pass data from one component to another.
00:00:07 You typically do it from a parent component to a child component.
00:00:10 Think of props as arguments you pass to a function.
00:00:13 Let me quickly show you how it works in action on our current example.
00:00:17 Let's say that each one of these cards renders a different movie title.
00:00:21 Later on, it can also be a thumbnail, title, description, and more.
00:00:24 But for now, let's say it's just the title.
00:00:27 you can go into that card and then pass something known as a prop.
00:00:31 Let's call it title and make it equal to some famous movie title.
00:00:35 Let's go with Star Wars.
00:00:37 The second one can be something like Avatar.
00:00:41 And for the third one, maybe we can do something like The Lion King.
00:00:46 Now, if we do that and save, you'll notice that no changes have been made to our app.
00:00:51 They're all still the same.
00:00:52 Card component.
00:00:53 Well, now we can put that prop to use by heading over to our card component and accepting that prop right into it.
00:01:01 We have to call a title and destructure it, and then instead of rendering the card component text, we can dynamically render the title that is being passed
00:01:12 into the card, resulting in different text for each one of these pieces of UI.
00:01:17 And keep in mind, the prop can be anything.
00:01:20 It can be a string, but it can also be something like a number or even a boolean.
00:01:26 It can even be a complex prop, which is an object.
00:01:29 So in this example, let's pass some information about the actors, which can be an array of different objects, where we have a name of each one of these
00:01:41 actors in a list.
00:01:41 You can do whatever you want.
00:01:43 And then we need to accept all of those props right here at the top, and then do something with them in the UI.
00:01:49 Pretty cool, right?
00:01:50 Well, we're just scratching the surface of what React is capable of.
00:01:54 So far, you're doing well.
00:01:56 But this is far from ideal.
00:01:58 This is looking very plain.
00:02:00 Just text on the screen.
00:02:02 We need to give it some styles to offer a good user experience to the users.