ReactJS - Props Overview

ReactJS - Understanding Props

Props (short for “properties”) are a fundamental concept in React. They allow you to pass data from a parent component to a child component. A key characteristic of props is that they are immutable within the receiving component; a component cannot change its own props. This one-way data flow helps make applications easier to understand and debug. Container components (or parent components) typically manage state, which can be updated, and then pass parts of this state down to child components as props.

Using Props with Functional Components

When you need to pass static or dynamic data to a component, you define them as attributes on the JSX element. Inside the functional component, these props are received as the first argument, typically an object.

App.jsx (Child Component)

import React from 'react';

// 'props' is an object containing all passed attributes
function App(props) {
    return (
        <div>
            <h1>{props.headerProp}</h1>
            <h2>{props.contentProp}</h2>
        </div>
    );
}

export default App;

main.js (or index.js - Entry Point)

import React from 'react';
import ReactDOM from 'react-dom/client'; // Updated for React 18
import App from './App.jsx';

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container); // Create a root.

root.render(
    <App
        headerProp="Header from props..."
        contentProp="Content from props..."
    />
);

This will render the App component, displaying the headerProp and contentProp values passed from main.js. The output will be: Header: Header from props… Content: Content from props…

Setting Default Prop Values

You can define default values for props. If a prop is not provided by the parent component, the default value will be used. In functional components, the most common way to set default props is using JavaScript’s default parameter syntax.

App.jsx (with Default Props)

import React from 'react';

function App({
    headerProp = "Default Header from props...",
    contentProp = "Default Content from props..."
}) {
    return (
        <div>
            <h1>{headerProp}</h1>
            <h2>{contentProp}</h2>
        </div>
    );
}

// Alternatively, for functional components, you can still use Component.defaultProps:
/*
App.defaultProps = {
    headerProp: "Default Header from props...",
    contentProp: "Default Content from props..."
};
*/

export default App;

main.js (Rendering with no props passed, to use defaults)

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);

root.render(<App />); // No props passed, so defaults will be used.

The output will be the default values: Header: Default Header from props… Content: Default Content from props…

Combining State and Props

A common pattern in React is for parent components to hold state and pass it down to child components as props. When the parent’s state changes, React re-renders the parent, which in turn re-renders the child components with the new prop values.

App.jsx (Parent and Child Components)

import React, { useState } from 'react';

// Child Component: Header
function Header(props) {
    return (
        <div>
            <h1>{props.headerMessage}</h1>
        </div>
    );
}

// Child Component: Content
function Content(props) {
    return (
        <div>
            <h2>{props.contentMessage}</h2>
        </div>
    );
}

// Parent Component: App
function App() {
    const [appData, setAppData] = useState({
        header: "Header from parent state...",
        content: "Content from parent state..."
    });

    // Example of how you might update the state (e.g., after a timeout or user interaction)
    /*
    setTimeout(() => {
        setAppData({
            header: "Updated Header!",
            content: "Updated Content!"
        });
    }, 3000);
    */

    return (
        <div>
            <Header headerMessage={appData.header} />
            <Content contentMessage={appData.content} />
        </div>
    );
}

export default App;

main.js (Entry Point)

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);

root.render(<App />);

The initial output will display the messages from the appData state. If the state in the App component were to update (e.g., due to user interaction or a data fetch), the Header and Content components would automatically re-render with the new prop values. This demonstrates how state flows down as props, enabling dynamic UIs.