If you are interested to learn about the React Class component
Props are arguments passed into React components. Props are passed to components via HTML attributes. Props are arguments passed into React components. props stands for properties.
React Props
React Props are like function arguments in JavaScript and attributes in HTML. To send props into a component, use the same syntax as HTML attributes:
Example
Add a “brand” attribute to the Car element:
const myElement = <Car brand="Ford" />;

The component receives the argument as a props
object:
Example
Use the brand attribute in the component:
function Car(props) { return <h2>I am a { props.brand }!</h2>; }
Pass Data
Props are also how you pass data from one component to another, as parameters.
Example
Send the “brand” property from the Garage component to the Car component:
function Car(props) { return <h2>I am a { props.brand }!</h2>; } function Garage() { return ( <> <h1>Who lives in my garage?</h1> <Car brand="Ford" /> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage />);
If you have a variable to send, and not a string as in the example above, you just put the variable name inside curly brackets:
Example
Create a variable named carName
and send it to the Car
component:
function Car(props) { return <h2>I am a { props.brand }!</h2>; } function Garage() { const carName = "Ford"; return ( <> <h1>Who lives in my garage?</h1> <Car brand={ carName } /> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage />);
Or if it was an object:
Example
Create an object named carInfo
and send it to the Car
component:
function Car(props) { return <h2>I am a { props.brand.model }!</h2>; } function Garage() { const carInfo = { name: "Ford", model: "Mustang" }; return ( <> <h1>Who lives in my garage?</h1> <Car brand={ carInfo } /> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage />);
Props are Read-Only
Whether you declare a component as a function or a class, it must never modify its own props. Consider this sum
function:
function sum(a, b) { return a + b; }
Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs. In contrast, this function is impure because it changes its own input:
function withdraw(account, amount) { account.total -= amount; }
React is pretty flexible but it has a single strict rule:
Default Props
It is not necessary to always add props in the reactDom.render() element. You can also set default props directly on the component constructor. It can be explained in the below example.
Example
import React, { Component } from 'react'; class App extends React.Component { render() { return ( <div> <h1>Default Props Example</h1> <h3>Welcome to {this.props.name}</h3> <p>Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad.</p> </div> ); } } App.defaultProps = { name: "JavaTpoint" } export default App;
Output

State and Props
It is possible to combine both state and props in your app. You can set the state in the parent component and pass it in the child component using props. It can be shown in the below example.
Example
import React, { Component } from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { name: "JavaTpoint", } } render() { return ( <div> <JTP jtpProp = {this.state.name}/> </div> ); } } class JTP extends React.Component { render() { return ( <div> <h1>State & Props Example</h1> <h3>Welcome to {this.props.jtpProp}</h3> <p>Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad.</p> </div> ); } } export default App;
Output:
