Props in React JS 2025

In React, **props** (short for properties) are used to pass data from a parent component to a child component. They are immutable, meaning a child component cannot modify the props it receives from its parent. This allows React to keep its data flow predictable and organized.

1. What are Props?

Props are how components in React communicate with each other. They are read-only values passed from a parent component to a child component. Props can be anything—strings, numbers, arrays, objects, functions, etc.

        // ParentComponent.js
        import React from 'react';
        import ChildComponent from './ChildComponent';

        const ParentComponent = () => {
            const message = 'Hello from Parent!';

            return (
                

                    
                
            );
        };

        export default ParentComponent;
    

        // ChildComponent.js
        import React from 'react';

        const ChildComponent = ({ greeting }) => {
            return 
{greeting}
;
        };

        export default ChildComponent;
    

2. Passing Props to Functional Components

In functional components, props are passed as an argument to the function. In the example below, the `greeting` prop is passed from the `ParentComponent` to the `ChildComponent`.

        // Functional Component Example
        const Greeting = (props) => {
            return 
{props.message}
;
        };

        const App = () => {
            return ;
        };
    

3. Default Props

Props can have default values. You can define default props for a component by specifying default values for props that are undefined or not passed by the parent component.

        // DefaultPropsExample.js
        import React from 'react';

        const Greeting = ({ message = 'Hello, world!' }) => {
            return 
{message}
;
        };

        export default Greeting;
    

4. Prop Types (Type Checking)

React provides a `PropTypes` feature that allows you to specify the type of props a component should receive. This helps ensure the correct data type is passed to the component, improving maintainability and debugging.

        // PropTypesExample.js
        import React from 'react';
        import PropTypes from 'prop-types';

        const Greeting = ({ message }) => {
            return 
{message}
;
        };

        Greeting.propTypes = {
            message: PropTypes.string.isRequired,
        };

        export default Greeting;
    

5. Props in Class Components

In class components, props are accessed using `this.props`.

        // ClassComponentExample.js
        import React, { Component } from 'react';

        class Greeting extends Component {
            render() {
                return 
{this.props.message}
;
            }
        }

        export default Greeting;
    

6. Passing Functions as Props

In React, you can also pass functions as props. This is commonly used for handling events and communicating from child components back to the parent component.

        // ParentComponent.js
        import React from 'react';
        import ChildComponent from './ChildComponent';

        const ParentComponent = () => {
            const handleClick = () => {
                alert('Button clicked!');
            };

            return (
                

                    
                
            );
        };

        export default ParentComponent;
    

        // ChildComponent.js
        import React from 'react';

        const ChildComponent = ({ onClick }) => {
            return Click Me;
        };

        export default ChildComponent;
    

7. Why Use Props?

Props allow for a **one-way data flow** from parent to child components, which is essential for building dynamic, interactive UIs in React. They allow React components to remain **pure** (i.e., no side effects) and reusable.

Conclusion

Props in React enable communication between components by passing data and functions from parent to child. They are immutable and help to maintain a predictable flow of data in React applications. Using props makes it easier to manage and organize your code, especially in large-scale applications.