Crear un componente que envuelve a otro (children) con React

Tiempo de lectura: < 1 minuto

Te explicaré cómo crear un componente de React que envuelva a otro y renderice su contenido dentro de algún marcado adicional, como <Texto>{child}</Texto>

Creamos un componente de ejemplo llamado Texto:

import React from 'react';

const Texto = ({ children }) => {
  return (
    <div style={{ border: '2px solid blue', padding: '10px' }}>
      {/* Renderizamos el contenido del children dentro del componente */}
      {children}
    </div>
  );
};

// Uso del componente Texto
const App = () => {
  return (
    <div>
      <h1>Ejemplo de Componente Texto</h1>
      {/* Aquí envolvemos cualquier contenido dentro del componente Texto */}
      <Texto>
        <p>¡Hola! Soy un párrafo dentro de Texto.</p>
        <button>Haz clic</button>
      </Texto>
    </div>
  );
};

export default App;

En este ejemplo, el componente Texto recibe children como una prop y los renderiza dentro de un div con un borde azul y un relleno de 10px. Luego, en la aplicación (App), utilizamos <Texto> como un contenedor alrededor de cualquier contenido que deseamos, como un párrafo y un botón.

Esto permite que Texto envuelva y agregue funcionalidad o estilo adicional al contenido proporcionado dentro de él.