Open In App
Related Articles

ReactJS Props Complete Reference

Improve Article
Save Article
Like Article

React allows us to pass information to a Component (from a parent component to a child component) using something called props (short for properties). Props is basically an object which is available for all the React components. Props are read only and cannot be modified by the component to which it belongs. 

Passing and Accessing props: We can pass props to any component as we declare attributes for any HTML tag. Have a look at the below code snippet:

<Welcome fullName = "Harsh Agarwal" />

In the above code snippet, we are passing a prop named fullName to the component named Welcome. This prop has the value “Harsh Agarwal”. Let us now see how can we access this prop (property).

For a React component, props object will store the prop as key : value pairs and it will look as shown below. fullName is the key and “John Wick” is the value.

props = { fullName: "Harsh Agarwal" }

In case of functional components, we can access a prop value as shown below.




import React from "react";
import ReactDOM from "react-dom";
/* Below given code will create a functional component called Welcome.
   This component takes one prop called fullName and displays a welcome message
   to the user. */
function Welcome(props) {
  return (
      <h1>Hello {props.fullName}</h1>
      <h2>Welcome to GeeksforGeeks</h2>
/* Below given code will render the HTML returned by the
   Welcome component inside the HTML element for which
   the id is "root" */
  <Welcome fullName="Harsh Agarwal" />,



The Complete list of Props are listed below:

Last Updated : 07 Jun, 2022
Like Article
Save Article
Similar Reads
Related Tutorials