Props in React

Understanding Props in React

In React, props (short for "properties") are fundamental for passing information from one component to another. The primary purpose of props is to enable a parent component to pass data to its child components, ensuring that data flow within your application is efficient and organised.

Key Points about Props:

1. Read-Only: The receiving component cannot modify props. They are strictly meant for reading data and should not be altered. This immutability helps maintain a unidirectional data flow, making the application easier to understand and debug.

2. Dynamic Updates: While props themselves are immutable, they can be updated when the parent component’s state changes. This allows for a responsive and interactive UI without any direct modifications to the props within the child components.

3. Prop Types: It's highly recommended to define the expected data types for props using PropTypes, which can help catch bugs in development by warning about incorrect prop types.

Example Usage

Here’s a simple example of how props are used in a React component:

import React from 'react';

function Greet(props) {
    return <h1>Hello, {props.name}!</h1>;
}

function App() {
    return <Greet name="John" />;
}

export default App;

In this example, the Greet component receives a name prop and renders a greeting message. The App component passes the prop, demonstrating how data flows from a parent to a child component.

Output:

You can visualise the output as follows:

Conclusion

Props are an essential part of how React components communicate with one another. By understanding how to use props effectively, you can build modular and maintainable components that enhance the overall structure of your application.

Reference: GeeksforGeeks - What are Props in React?

Feel free to add or modify anything else you'd like!