Props
In React, components use props (short for “properties”) to share and display data throughout the application. Props are passed from parent to child components only and cannot flow in the reverse direction.
With functional components, props are handled as parameters in the function definition, making the code simpler and more intuitive.
Props can be various data types, including:
- Numbers
- Strings
- Functions
- Objects
- Booleans
- Arrays
Syntax
import React from 'react';
function ParentComponent() {
return <ChildComponent prop1="Mike" prop2="pizza" />;
}
function ChildComponent(props) {
return <h2>This is prop1: {props.prop1}. This is prop2: {props.prop2}.</h2>;
}
export default ParentComponent;
Props
in Functional Components
In functional components, props are received directly as an argument, making them simpler and more intuitive compared to class-based components, which use this.props
.
Class-Based Components
class Greeting extends React.Component {render() {// Printing the props objectconsole.log(this.props);return <h1>Hello world</h1>;}}
Function-Based Components
function Greeting(props) {function Greeting(props) {// Printing the props objectconsole.log(props);return <h1>Hello world</h1>;}
Pass props
to a Component
Information can be passed to a React component by giving it an attribute:
<MyComponent foo="bar" />
For example, to pass a message, "This is some top secret info."
, it can be done like this:
<Example message="This is some top secret info." />
To pass information to a component, a name is assigned to the information that is being passed.
In the above example, the name message
is used, but any name can be chosen.
For non-string information, wrap the data in curly braces. Here’s how an array can be passed:
<Greeting myInfo={['top', 'secret', 'lol']} />
In this next example, several pieces of information are passed to <Greeting />
, with values that aren’t strings wrapped in curly braces:
<Greeting name="Frarthur" town="Flundon" age={2} haunted={false} />
In functional components, props are directly received as an argument to the component function.
function Greeting({ name, town, age, haunted }) {return (<div><h1>Hello, {name} from {town}!</h1><p>Age: {age}</p><p>Haunted: {haunted ? 'Yes' : 'No'}</p></div>);}
Displaying the Props
A component often needs to display the information that is passed to it.
To make a component display passed-in information:
- Identify the component that will receive the information.
- Access the prop directly in the function’s parameter and use it inside the JSX.
import React from 'react';import ReactDOM from 'react-dom';function Greeting({ firstName }) {return <h1>Hi there, {firstName}!</h1>;}ReactDOM.render(<Greeting firstName="Rybu" />, document.getElementById('app'));
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn React on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn React
In this React course, you’ll build powerful interactive applications with one of the most popular JavaScript libraries.Intermediate13 hours