Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

props
react
javascript
jsx

What are props in React?

Educative Answers Team

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
RELATED COURSES

View all Courses

Keep Exploring