Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

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

import React from 'react';

function App(props)
{
   return(
      <>
         <h2> {props.name} is the best website </h2>
      </>
   );
}
export default App;

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

props in react

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

import React from 'react';

function App(props)
{
   return(
      <>
         <h2> {props.name} is the best website </h2>
      </>
   );
}

App.defaultProps={
   name: "enter you name"
}
export default App;

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

props in react
Reactjs Guru
Reactjs Guru

Welcome to React Guru, your ultimate destination for all things React.js! Whether you're a beginner taking your first steps or an experienced developer seeking advanced insights.

React tips & tutorials delivered to your inbox

Don't miss out on the latest insights, tutorials, and updates from the world of ReactJs! Our newsletter delivers valuable content directly to your inbox, keeping you informed and inspired.

5 Comments

  1. […] React Props are an important mechanism in our application, since they read-only and immutable, the React props validation becomes a big issue because props used to transfer data from one component to another component. If the component gets wrong data, or you can say data type, then it leads to bugs or unexpected errors. Since JavaScript doesn’t have an inbuilt type checking system, developers decided to use flow, typescript type of extensions to check. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Table of Contents