Cómo enviar Props de Padre a Hijo en React con Next.js

En React, la comunicación entre componentes es crucial y una de las formas de lograr esto es mediante el paso de props de un componente padre a un componente hijo. En este artículo, aprenderemos cómo hacer esto en Next.js.

Creación de un componente Padre

Primero, vamos a crear un componente padre en Next.js. Puedes hacerlo creando un archivo llamado Padre.js que contenga el siguiente código:

        
            import React from 'react';
            import Hijo from './Hijo';

            const Padre = () => {
                const mensaje = 'Hola desde el Padre';

                return (
                    <div>
                        <Hijo mensaje={mensaje} />
                    </div>
                );
            }

            export default Padre;
        
    

En este ejemplo, estamos pasando el mensaje “Hola desde el Padre” al componente hijo como una prop llamada mensaje.

Creación de un componente Hijo

A continuación, crearemos un componente hijo que pueda recibir y utilizar la prop que le pasamos desde el componente padre. Puedes crear un archivo llamado Hijo.js con el siguiente código:

        
            import React from 'react';

            const Hijo = (props) => {
                return (
                    <div>
                        <p>{props.mensaje}</p>
                    </div>
                );
            }

            export default Hijo;
        
    

En este ejemplo, el componente hijo simplemente renderiza el mensaje que recibe como prop.

Uso de los componentes en una página

Finalmente, podemos importar y utilizar estos componentes en una página en Next.js. Por ejemplo, en un archivo llamado index.js, podrías tener el siguiente código:

        
            import React from 'react';
            import Padre from '../components/Padre';

            const Index = () => {
                return (
                    <div>
                        <h1>Ejemplo de comunicación entre componentes en Next.js</h1>
                        <Padre />
                    </div>
                );
            }

            export default Index;
        
    

En este ejemplo, estamos importando el componente Padre y utilizando en la página Index, lo que mostrará el mensaje “Hola desde el Padre”.

Conclusión

En resumen, en React y Next.js puedes enviar props de un componente padre a un componente hijo para permitir la comunicación entre ellos. Esto es útil para pasar datos y comportamientos de un componente a otro, lo que facilita la creación de aplicaciones más dinámicas y reutilizables.