Pasando el estado a componentes hijos

Supongamos que tenemos un componente principal llamado Padre que contiene un estado y un componente hijo llamado Hijo que necesita acceder a ese estado:

import React, { useState } from 'react';

// Componente Hijo
const Hijo = ({ mensaje }) => {
    return <p>{mensaje}</p>;
};

// Componente Padre
const Padre = () => {
    const [mensaje, setMensaje] = useState('¡Hola desde el Padre!');

    return (
        <div>
            <h1>Componente Padre</h1>
            <Hijo mensaje={mensaje} />
            <button onClick={() => setMensaje('¡Hola desde el Padre actualizado!')}>
                Actualizar mensaje en Padre
            </button>
        </div>
    );
};

export default Padre;

En este ejemplo, Padre es el componente principal que contiene el estado mensaje. También tiene un botón que permite actualizar el estado del mensaje. El componente hijo Hijo recibe mensaje como una prop y lo muestra en un párrafo.

Cuando Padre se renderiza, pasa el estado mensaje como una prop al componente Hijo. Luego, si el estado mensaje se actualiza en Padre, el componente Hijo se vuelve a renderizar automáticamente con el nuevo valor de mensaje.

Aquí tienes cómo pasar la función setMensaje al componente hijo para que pueda actualizar el estado del componente padre:

import React, { useState } from 'react';

// Componente Hijo
const Hijo = ({ mensaje, actualizarMensaje }) => {
    return (
        <div>
            <p>{mensaje}</p>
            <button onClick={() => actualizarMensaje('¡Mensaje actualizado desde el Hijo!')}>
                Actualizar mensaje en Padre
            </button>
        </div>
    );
};

// Componente Padre
const Padre = () => {
    const [mensaje, setMensaje] = useState('¡Hola desde el Padre!');

    return (
        <div>
            <h1>Componente Padre</h1>
            <Hijo mensaje={mensaje} actualizarMensaje={setMensaje} />
        </div>
    );
};

export default Padre;

En este ejemplo, hemos modificado el componente hijo Hijo para que reciba una prop adicional llamada actualizarMensaje, que es la función setMensaje del componente padre Padre.

Cuando el botón dentro del componente hijo se hace clic, invoca la función actualizarMensaje pasada desde el componente padre con el nuevo mensaje. Esto actualizará el estado mensaje en el componente padre, y como resultado, React volverá a renderizar el componente padre con el nuevo estado.