Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
React Props
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
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, Functions
Subscribing 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.