In React, props (short for "properties") are used to pass information from one component to another. The main purpose of props is to allow a parent component to send data to its child components.
Here are some features of Props:
- Props cannot be modified by the receiving component.
- They are strictly for reading data and should not be altered.
- Props can be updated when the parent component’s state changes.
Note => Props can be used in both functional and class components. With functional components, props are passed as arguments to the function.
Now let's understand this with the help of example:
JavaScript import React from 'react'; function Greet(props) { return <h1>Hello, {props.name}!</h1>; } function App() { return <Greet name="Sneha" />; } export default App; Output
What Are Props in React- Greet Component: Accepts props and displays the value of props.name inside an <h1> tag.
- App Component: Renders the Greet component and passes the value "Sneha" to the name prop.
- Output: The Greet component shows the text Hello, Sneha! on the webpage.
How Do Props Work in React?
Here are three steps to using React props:
Define an attribute and its value (data).Pass it to the child component(s) by using props.Render the props data.
Props in ReactLet’s understand the working of props with a basic example.
App.js import React from 'react'; import Parent from './Parent'; function App() { return ( <div> <Parent /> {/* Render the Parent component */} </div> ); } export default App; import React from 'react'; import Child from './Child'; function Parent() { return ( <div> <h1>Welcome to the Parent Component!</h1> <Child name="Jiya" /> {/* Passing the 'name' prop with value "John" */} </div> ); } export default Parent; import React from 'react'; function Child(props) { return <h2>Hello, {props.name}!</h2>; } export default Child; 
Working of PropsIn this example
- App Component (App.js): Renders the Parent component.
- Parent Component (Parent.js): Renders a heading and the Child component and passes the prop name="Jiya" to the Child component.
- Child Component (Child.js): Receives the name prop and displays Hello, Jiya!
Passing Multiple Props
In React, we can pass multiple props to a child component, and each prop can contain different types of data, such as strings, numbers, arrays, or even functions. Let's understand this with the help of example
App.js import React from 'react'; import Parent from './Parent'; function App() { const appStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', margin: 0, fontFamily: 'Arial, sans-serif', }; return ( <div style={appStyle}> <Parent /> </div> ); } export default App; import React from 'react'; import Child from './Child'; function Parent() { const parentStyle = { textAlign: 'center', }; return ( <div style={parentStyle}> <h1>Welcome to the Parent Component!</h1> <Child name="Jiya" age={25} city="New York" /> </div> ); } export default Parent; import React from 'react'; function Child(props) { const childStyle = { marginTop: '20px', fontSize: '18px', color: '#333', }; return ( <div style={childStyle}> <h2>Hello, {props.name}!</h2> <p>You are {props.age} years old.</p> <p>You live in {props.city}.</p> </div> ); } export default Child; Output
Passing Multiple Props- The Profile component receives name and age as props.
- The data is displayed dynamically in the component.
Passing Functions as Props
We can pass not only data (like strings, numbers, etc.) but also functions from a parent component to a child component using props. This is useful when we want the child component to trigger an action in the parent component.
Parent.js import React from 'react'; import Child from './Child'; function Parent() { const handleClick = () => { alert('Button clicked in Child!'); }; return <Child onClick={handleClick} />; } export default Parent; import React from 'react'; function Child(props) { return <button onClick={props.onClick}>Click Me!</button>; } export default Child; import React from 'react'; import Parent from './Parent'; function App() { return ( <div> <Parent /> </div> ); } export default App; In this example
- App.js renders Parent.
- Parent defines handleClick and passes it as onClick to Child.
- Child calls the onClick function when the button is clicked.
How to Set a Default Value for Props
In React, defaultProps is a special property that allows us to set default values for props. This is useful when no value is passed for a prop, ensuring the component still works with a fallback value.
Greeting Component import React from 'react'; function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } Greeting.defaultProps = { name: 'Guest', }; export default Greeting; import React from 'react'; import Greeting from './Greeting'; function App() { return ( <div> <Greeting /> <Greeting name="Alia" /> </div> ); } export default App; In this example
- Greeting Component: It expects a name prop. If no name is passed, it will use the default value "Guest".
- App Component: The first Greeting component doesn't pass a name, so the default "Guest" is used and the second Greeting component passes the name prop as "Alia", so it will display Hello, Alia!
Destructuring Props in React
In React, props are often passed as an object to the component. Using destructuring, we can extract specific properties from this object and use them directly. This makes accessing props simpler and more concise.
Syntax
function Greeting(props) { return <h1>Hello, {props.name}!</h1>; }For more details follow this article => Destructuring of Props in ReactJS
Unidirectional Flow of Props in React
In React, props (short for properties) are used to pass data from one component to another. The flow of props in React is unidirectional, which means that data flows in only one direction: from parent components to child components.
For more details follow this article => ReactJS Unidirectional Data Flow
Difference Between State vs Prop
Below are the following difference between the state vs prop
State | Prop |
|---|
State is a variable that holds local data for a component. | Props are data passed from parent to child components. |
State is mutable and can be changed within the component. | Props are immutable and cannot be modified by the child component. |
Used to manage component-specific data and control reactivity. | Used to pass data between components and customize child components. |
Defined and managed inside the component itself. | Passed from parent component to child components. |
State can be updated using setState() (for class components) or useState() (for functional components). | Props cannot be changed directly; they are read-only. |
State can change during the life cycle of the component. | Props stay the same unless the parent component changes them. |
Example : const [count, setCount] = useState(0); | Example : <Child name="Alice" age={25} /> |
For more details follow this article => What are the differences between props and state
Conclusion
In React, props are used to pass data from a parent to a child component, enabling communication between them. They are immutable, read-only, and flow unidirectionally. Props can hold various data types, including functions, and are essential for building dynamic and reusable components. DefaultProps ensure components work even when no props are passed, and destructuring simplifies accessing prop values. Understanding props and their role helps in managing data flow and building maintainable React applications.