How to Use Props in React

In this part we will see how to use props in react, React Props stand for Properties. These read-only elements are called props in react. It’s an object that stores the value of the attributes of a tag. They work similarly to HTML attributes. It allows data to be passed from one component to another. It works in the same way as function arguments. Props can be passed to a component similar to arguments in a function.

Props cannot be modified in the component since they are read-only elements, If you want to use a prop you need to add it in render() function in your main file we have here index.js.

Some Functionality of React Props

• ReactJS uses props to send data to the components.
• ReactJS treats every component as a pure JavaScript function.
• ReactJS props can be used to replace parameters in a pure JavaScript function.
• Props cannot be changed. These are pure functions. Pure functions cannot alter the parameters’ data. React JS also doesn’t allow us to change data for props.

Syntax of Props in React

The simplest way to use props is to use in function:

import React from 'react';
function World(props) {
 return <h1>Hello, {props.name}</h1>;
}

We have used here the function in which we have passed props as an argument for function and to use this props we will add in {} bracket like above example. Also, we can add props in class as well:

class World extends React.Component {
 render() {
 return <h1>Hello, {this.props.name}</h1>;
 }
}

We have done the same thing as function had, the only difference is with need to call props with ‘this’ otherwise all things are same.

Example:

App.js

1import React from 'react';
2function App(props)
3{
4 return(
5 <>
6 <h2> {props.name} is the best website </h2>
7 </>
8 );
9}
10export default App;
11

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <App name= "ReactJS Guru"/> 
);

Output

Default Props in React

You can also set default values for props, so if you don’t pass anything, the default value replace the prop value:

Example

App.js

1import React from 'react';
2function App(props)
3{
4 return(
5 <>
6 <h2> {props.name} is the best website </h2>
7 </>
8 );
9}
10App.defaultProps={
11 name: "enter you name"
12}
13export default App;
14

To set default props values, we have to use default Props and this will contain your default props values. We have added default value for name is “enter your name”.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <App/> 
);

As you can see, we didn’t have added props values, so the default value will take place.

Output