Props stand for “Properties.” They are read-only components. Props is an object which stores the value of attributes of a JSX element, similar to the HTML attributes.

Props are used to make components more dynamic by passing data from parent component to child component. Like whenever we call child components from parents we can pass data as props.

Let’s see the example of How to pass and receive the Props:

Passing Props in Components

In the parent component, when you render the child component, you can pass props by adding attributes to the child component.

For example, I have created a component named User, then I have imported it in `App.js` as `App.js` is our root component, same as the parent component.

Then I have rendered the User component with `name` & `age` attributes in `App.js`.

Here the `name` & `age` are props and “Ankit” & “22” are the values of those props.

// App.js
import User from "./components/User"; function App() {
return (
<div className="App">
<User name="Ankit" age="22"/>
</div>
);
}

export default App;

Receiving Props in Components

After passing the Props in parent component to child component, you can access those Props using `props` object in the child component.

Let’s see the example of this process:

User component receives props as function parameters then it uses the value of props by defining the parameter as a `props` object. Then renders its value inside the JSX elements.

See the code example below:

// User.js
import React from 'react'

function User(props) { return (
<p>My name is {props.name} and I am {props.age} years old.</p>
)
}

export default User;

// Output
// My name is Ankit and I am 22 years old.

Props in Class Components

Here is an example of how to use Props in Class Based Components.

// User.js
import React from 'react'

class User extends React.Component { render(){
return (
<h1>{this.props.name}</h1>
)
}
}

export default User;

React Props is not limited to simple data types like Strings or Numbers. You can pass different types of data values through Props. Here are some data types given below, which React Props can support as its data type.

• String
• Number
• Boolean
• Objects
• Array
• Functions, etc.

Objects as props

Let’s see How you can pass props as objects in React components.

In the below example, I have created an object called userData with properties such as name and age. Then i have passed this object as prop to the User component.

// App.js
import User from "./components/User"; function App() {
const userData = { name: "Ankit",
age: "22"
};

return (
<div className="App">
<User userData={userData}/>
</div>
);
}

export default App;

Then, we can access this object props in User component something like this:

// User.js
import React from 'react'

function User(props) { return (
<p>My name is {props.userData.name} and I am {props.userData.age} years old.</p>
)
}

export default User;

Similarly, you can also pass props as JS Events and Functions. We will learn this in further chapters.