React Props in Functional and Class Components

React props are extremely important in more complex React apps. They provide a way for data to pass down through the component tree. In this guide, we’re going to learn how to use props in React — in both functional and class-based components.

Prerequisite Knowledge

• React Functional Components
• React Class-based Components

Contents

• What Are Props?
• Props in Functional Components
• Props in Class Components

What Are Props?

React props are a way to pass data (variables) from a parent component to a child component, allowing you to create more complex and useful UI structures.

Imagine for a moment that you are creating an e-commerce app. It’s likely that you have some central store of data for all the products. This may take the form of a store in a Flux architecture, a cloud database, or both. There are many UI components that will need access to the data, including the Product displays, the price displays, as well as any “Featured Sale” kind of components.

We have two options: each component can make a separate request to the data store, or a parent component can make a single request and pass data to its children. The second option is, if you haven’t guessed, the more efficient one.

Below is a diagram of how this works.

Using React props works slightly differently in functional and class-based components, so we’ll look at both separately. However, passing props to components from a parent is always the same: we use attributes.

Below, we have a ProductDisplay component that passes some data to a Price component.

// Just imagine for a moment that this object
// came from some kind of API
const product = {
	name: 'Dasher Running Shoes',
	description: 'Leave your competition in the dust with these awesome shoes!',
	price: 79.99
};

const ProductDisplay = () => {
	return (
		<div class='productDisplay'>
			<h2>{product.name}</h2>
			<p>{product.description}</p>
			<Price price={product.price} />
		</div>
	);
};

We can see that the Price component accepts a prop called price. The question is, how does Price use this data?

(NOTE: Another way to pass props is to pass them as a child of the component. For example: <Price> {product.price} </Price>)

Props in Functional Components

To use props in a functional component, simply make the function accept a parameter. All props will be contained in the same object argument, meaning that you can also destructure individual props. Let’s see an implementation of the Price component.

const Price = (props) => {
	return <h3 id='priceDisplay'>{ props.price }</h3>
};

It’s that simple! The props object contains any props passed to the component. To save keystrokes you can also destructure these props:

const Price = ({ price }) => {
	return <h3 id='priceDisplay'>{ price }</h3>
};

And to accept props that are passed as children (<Price> {product.price} </Price>) you can use the props.children property.

const Price = ({ children }) => {
	return <h3 id='priceDisplay'>{ children }</h3>
};

Props in Class Components

To use React props in a class-based component, first accept them in the constructor, then pass them to the super() function, then reference them with this.props.

Below is the class version of the Price component.

class price extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		return <h3 id='priceDisplay'>{ this.props.price }</h3>
	}
}

And to accept props passed as children (<Price> {product.price} </Price>):

class Price extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		return <h3 id='priceDisplay'>{ this.props.children }</h3>
	}
}

Conclusion

React props are the easiest way to pass data between components, and are sure to be a common piece of your React toolkit. In the next article, we’re going to learn about React hooks and the useEffect hook.

For more information on passing props to components, check the React docs.