From the course: React Practice for Beginners: Build and Modify Basic Components
Unlock this course with a free trial
Join today to access over 25,500 courses taught by industry experts.
Passing data via props - React.js Tutorial
From the course: React Practice for Beginners: Build and Modify Basic Components
Passing data via props
- [Instructor] We can pass data to components via props, and this is awesome because components become a lot more useful and dynamic when they can receive data. In React, you do that using props. This is short for "properties." Props let you pass data into a component from its parent. The parent is the component that is around the child component. Let's go ahead and turn a previous example into a component that's receiving a name as a prop from its parent, App. So on line 10, you can see UserName is a child component, and that the App is actually around it as it's in the function App which is returning JSX, which is a component itself. In order to make it receive a name, I'm going to put curly braces inside my parameter list and put the word "name" in there. Then I'm going to go ahead, I'm going to render the name inside my h3. So you might wonder, "Well, where will it get the name from?" I need to pass it in here where I'm using my components. Please mind the name on line 10 of this…