ReactJS Props Reference

In React, one of the key concepts that make it flexible and powerful is props. Props, short for “properties“, are used to pass data from one component to another. They enable React components to be dynamic and reusable, allowing data to flow down the component tree.

In this article, we’ll take a closer look at React props, their role, how they work, and how to use them effectively.

What is Props?

In React, props are read-only data passed from one component to another. They are immutable, meaning the child component cannot modify the props it receives. Only the parent component can alter the data passed through props. React enforces a unidirectional data flow, meaning that data typically flows from the parent component down to the child. However, props can also be used to pass callback functions, allowing child components to communicate with the parent and trigger changes in state or behaviour.

With the help of Props, we can make components reusable and dynamic by allowing different data to be passed into a component at runtime. This flexibility helps you to create components that can display dynamic content depending on the props they receive.

Syntax

Here, the prop ‘fullName’ is passed with the value “Ashish Bhardwaj” to the ‘App’ component.

<App fullName = "Ashish Bhardwaj" />

Now let’s see an example to understand how props are passed and displayed.

//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")
);

//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

Passing Props

React JS Props Reference

• Props Introduction
• React JS Props – Set 1
• React JS Props – Set 2
• React JS PropTypes
• Passing Props
• Pass Props from Parent To Child
• Pass Props from Child To Parent
• Access Props
• ReactJS Render Props
• Unidirectional Data Flow
• Ways To Access Props
• Prop Drilling
• React JS State vs props
• Props Validation
• Restrict Props

kartik

Follow

Improve

Article Tags :

• JavaScript
• ReactJS
• Web Technologies
• React-Props