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.
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")
);
//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 PropsReact JS Props Reference
Similar Reads
ReactJS Render Props Render Props is a React pattern that allows components to share logic by passing a function as a prop. The receiving component calls this function to render content dynamically, enabling code reuse while keeping the UI flexible.Syntaxconst DataProvider = ({ render }) => render("Hello, Render Prop
4 min read
ReactJS Components Complete Reference In ReactJS, components are the building blocks that help you create interactive UIs by dividing your app into smaller, reusable pieces of code. Understanding how components work is essential for efficiently developing React applications. In this article will provide a complete reference to React com
3 min read
ReactJS Props - Set 1 The react props refer to properties in react that are passed down from parent component to child to render the dynamic content.Till now we have worked with components using static data only. In this article, we will learn about react props and how we can pass information to a Component.What are Prop
5 min read
ReactJS Props - Set 2 In our previous article ReactJS Props - Set 1 we discussed props, passing and accessing props, passing props from one component to another, etc. In this article, we will continue our discussion on props. So, what if we want to pass some default information using props to our components? React allows
4 min read
React Rebass Props React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know what are Props in React Rebase. The prop is an important component that is required in each development.Props are used for setting design constraints, ensuring easy accessibility to designs.
4 min read