Crear un fragment con React

Tiempo de lectura: 2 minutos

Hola y bienvenidos a mi nuevo artículo sobre React. Hoy vamos a ver cómo podemos crear un fragment con React.

Un fragment, es un espacio en la pantalla que se cambia cuando pulsamos un botón o un menú.

Para crear este fragment, primero vamos a crear el menú que permite cambiar de pantalla:

Lo llamamos menu.tsx

import React, { useState, useEffect } from 'react';

export enum SectionMenu{
  Inicio = 'Inicio',
  Datos = 'Datos',
}

interface Props {
  setContent: React.Dispatch<React.SetStateAction<SectionMenu>>;
  content: SectionMenu;
}

const Menu: React.FC<Props> = ({ setContent, content }) => {
  const handleButtonClick = (newContent: SectionMenu) => {
    setContent(newContent);
  };

  const [hasOverflow, setHasOverflow] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      const element = document.getElementById('menu-dashboard-container');
      if (element) {
        setHasOverflow(element.scrollWidth > element.clientWidth);
      }
    };

    window.addEventListener('resize', handleResize);
    handleResize();

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const menuItems = [
    { label: 'Inicio', section: SectionMenu.Inicio },
    { label: 'Datos', section: SectionMenu.Datos },
    // Agrega más elementos según sea necesario
  ];

  return (
    <div
      id="menu-dashboard-container"
      style={{
        display: 'flex',
        flexDirection: 'row',
        overflowX: hasOverflow ? 'auto' : 'hidden',
        justifyContent: hasOverflow ? 'flex-start' : 'center',
        padding: '10px',
      }}
    >
      {menuItems.map((item) => (
        <button
          key={item.section}
          onClick={() => handleButtonClick(item.section)}
          style={{
            backgroundColor: content === item.section ? 'blue' : 'inherit',
            color: 'gray  ',
            marginRight: '10px',
            border: 'none',
            cursor: 'pointer',
            padding: '8px 16px',
          }}
        >
          {item.label}
        </button>
      ))}
    </div>
  );
};

export default Menu;

Este componente tiene esta forma:

Debes modificar los colores y elementos que crean el menú.

Ahora vamos a crear una pantalla que contendrá el fragment que cambiará el contenido según lo que se pulse:

fragment.tsx

import React, { useState } from 'react';
import Menu, { SectionMenu } from './menu';

const DashboardScreen: React.FC = () => {
  const [content, setContent] = useState<SectionMenu>(SectionMenu.Inicio);

  const renderContent = () => {
    switch (content) {
      case SectionMenu.Inicio:
        return <div>Contenido de Inicio</div>;
      case SectionMenu.Datos:
        return <div>Contenido de Datos</div>;
      // Agrega más casos según sea necesario
      default:
        return null;
    }
  };

  return (
    <div>
      <Menu setContent={setContent} content={content} />
      {renderContent()}
    </div>
  );
};

export default DashboardScreen;

Ahora que tenemos los dos componentes unidos, podemos ver cómo cambia de sección al pulsar al elemento inferior y sin tener que recargar toda la página.