React Props and State

1. What are Props?

Props, short for "properties," are read-only attributes that are passed from a parent component to a child component. They allow you to pass data and event handlers to child components.

Here’s an example of using props in a React component:

Edit Copy

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

// Usage example
<Welcome name="Alice" />

In this example, the name prop is passed to the Welcome component, allowing it to display a personalized greeting.

2. What is State?

State is a built-in object used to store property values that belong to a component. Unlike props, state is managed within the component and can change over time in response to user actions, network responses, or other events.

Here’s an example of a component with state:

Edit Copy

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

In this example, the count state variable is initialized to 0 and updated every time the button is clicked.

3. Difference Between Props and State

• Props: Used to pass data from parent to child components. They are read-only and cannot be modified by the child component.
• State: Managed within the component and can be modified. State allows components to respond to user input or other dynamic factors.

Here’s an example illustrating both props and state in a single component:

Edit Copy

import React, { useState } from 'react';

function Greeting(props) {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return (
        <div>
            <h1>Hello, {props.name}!</h1>
            <p>{isLoggedIn ? "Welcome back!" : "Please log in."}</p>
            <button onClick={() => setIsLoggedIn(!isLoggedIn)}>Toggle Login</button>
        </div>
    );
}

// Usage example
<Greeting name="Alice" />

Here, props.name is passed from the parent, and isLoggedIn is a state variable that toggles based on user interaction.

4. Updating State

State updates are managed using functions like setState in class components or useState in functional components. When state is updated, React re-renders the component, reflecting the new state values in the UI.

Example of updating state with useState:

Edit Copy

const [isVisible, setIsVisible] = useState(true);

function toggleVisibility() {
    setIsVisible(!isVisible);
}

In this example, calling toggleVisibility will toggle the isVisible state, and React will re-render the component with the updated value.

5. Summary

In this tutorial, you learned about props and state in React. Props allow data to be passed between components, while state manages data within a component, enabling dynamic and interactive UIs.