Open In App
Related Articles

ReactJS Props Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In React, components can receive information from a parent component by utilizing props (short for properties). A prop is an object accessible to all React components. It serves as a means to pass data from a parent component to a child component.

<Welcome fullName = "Ashish Bhardwaj" />

In the provided code, the prop `fullName` is passed with the value “Ashish Bhardwaj” to the `Welcome` component, and accessing this prop is demonstrated succinctly.

props = { fullName: "Ashish Bhardwaj" }

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

props.propName;

Example: Below is the basic implementation of the React Props.

Javascript

//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
 
ReactDOM.render(
    <React.StrictMode>
        <App fullName={"Ashish Bhardwaj"} />
    </React.StrictMode>,
    document.getElementById("root")
);

                    

Javascript

//App.js
import React from "react";
 
function App(props) {
    return (
        <div style={{
            color: "green",
            textAlign: "center"
        }}>
            <h1 style={{
                color: "red",
            }}>Hello {props.fullName}</h1>
            <h2>App to GeeksforGeeks</h2>
        </div>
    );
}
 
export default App;

                    

Output:


nameprop

Output

React JS Props Reference:

Props Reference

Description

React JS Methods as Props

We know that everything in ReactJS is a component and to pass in data to these components, props are used.

React JS PropTypes

PropTypes help in specifying the expected data types of the props (properties) that a component should receive during its use.

React JS Props – Set 1

React allows us to pass information to a Component using something called props

React JS Props – Set 2

We will learn about some more advanced concepts about props in this article

Unidirectional Data Flow

Unidirectional data flow is a technique that is mainly found in functional reactive programming.

React JS State in React

The state in React is an instance of the React Component Class that can be defined as an object of a set of observable properties that control the behavior of the component.

React JS State vs props

States and props are two of the most important concepts of React and everything in React is based upon them.

React JS Implementing State & Lifecycle

lifecycle methods are used to control the components at different stages from initialization till unmounting.



Last Updated : 06 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads