Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

props
react
javascript
jsx

What are props in React?

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Props, in React, are properties of a Component that comes in handy for customization. A prop can be thought of as a parameter, as it changes the behavior (or output) of a component.

Props can be used in two ways:

1. Functional component

​In the code snippet below, the property “name” of MyComponent is declared as a props.name and enclosed in {}; this is the general format used to declare props in a Functional Component. The “name” of MyComponent will be set, like a property is set for an HTML tag, just as it has been set​ in the render() method of App.

import React from 'react';

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

2. Class component

There are a few extra things to do when using props with a Class Component: First, import { Component } from 'react'; second, use the this keyword when declaring the prop. This component is used inside App the same way as a Functional Component is.

import React from 'react';

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
svg viewer
The difference between a Functional prop and a Class Component prop.

RELATED TAGS

props
react
javascript
jsx
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring