Bootcamp
Search…
7.2.1: Props

Introduction

React manages data by passing them through the element hierarchy through "props", short for "properties". When we nest various components, parent components can pass props to their children components. There is virtually no limit to the number of levels we can pass data through.

Example

BigAnnouncement is a parent component that passes a warning prop to its child component BigText. warnings's value is specified inline where we pass the prop.
function BigAnnouncement() {
const myEl = (
<div>
{/* The next line passes the warning prop with value "watch out!" */}
<BigText warning="watch out!" />
<p>Lorem Ipsum!!</p>
</div>
);
console.log('myEl:', myEl);
return myEl;
}
The warning prop name becomes a key in the functional component BigText's 1st parameter, which is always an object. By convention, the 1st param to functional components is a props object that contains all the props passed to it.
function BigText(props) {
// We can access the warning prop passed to BigText from the props object.
console.log('this is warning:', props.warning);
​
return (
<h1 className="hero-text">
{/* The CSS class name "warning" is unrelated to the warning prop */}
Hey <span className="warning">Wow!</span>
</h1>
);
}

Putting it All Together

import React from 'react';
import { render } from 'react-dom';
​
// Use object decomposition to extract the warning prop from the props param.
function BigText({ warning }) {
return (
<h1 className="hero-text">
{/* Render the warning prop. CSS class name "warning" is unrelated. */}
Hey <span className="warning">{warning}</span>
</h1>
);
}
​
function BigAnnouncement() {
const myEl = (
<div>
{/* Pass warning prop to BigText */}
<BigText warning="watch out!" />
<p>Lorem Ipsum!!</p>
</div>
);
console.log('myEl:', myEl);
return myEl;
}
​
// Create root element to render React elements into
const rootElement = document.createElement('div');
// Append root element to document
document.body.appendChild(rootElement);
// Have React render the JSX element into the root element
render(<BigAnnouncement />, rootElement);

Creating Components with Props

These are more applicable examples on how you can refactor your code into smaller JSX components.
These examples are individual "component files" that export their functional components defined within, and can be called into index.js or wherever you are "assembling" the components.
import React from 'react';
​
function TestMyNumber(props) {
const enteredNumber = props.number;
const element = (
<div>
<p>{enteredNumber}</p>
{enteredNumber > 5 && <p>Wow! Big numbers!</p>}
</div>
);
​
return element;
}
​
export default TestMyNumber;

Using Arrow Functions and Destructuring props

import React from 'react';
​
const TestMyNumberAgain = (props) => {
const { number } = props;
​
const element = (
<div>
The number
{' '}
{number}
{' '}
is
{' '}
<b>{number > 5 ? 'greater' : 'less'}</b>
{' '}
than 5.
</div>
);
​
return element;
};
​
export default TestMyNumberAgain;

Props can also be Strings and Objects

import React from 'react';
​
function MyStyledHeading(props) {
const myStyle = props.style;
const element = (
<h1 style={myStyle}>
{props.text}
</h1>
);
​
return element;
}
​
export default MyStyledHeading;