From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment
Unlock this course with a free trial
Join today to access over 25,200 courses taught by industry experts.
How props work in React
From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment
How props work in React
If you look at the structure here of what we're logging, it's not just the string, I love React. We're actually logging out an object. Properties is an object. And since it's an object, we can use object destructuring to explicitly name the values of the properties in our parameters, and that's how we can customize it. All right, still confused? Let me show you. So I could destructure out from our header, specifically in our properties, but let's say we just want the title. I can say, hey, I just want the title. I'll just destructure out title. And that should give us access to title. And if we go back now and then refresh and we check our logs, we're no longer getting this object. We're now getting the title. We're now getting the title, I love React. So that now, instead of returning this hardcoded text, we have now a dynamic, customized header with access to title. So we could therefore return title. But if we just write title like this in JSX, it's not gonna work because it thinks…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.