Controle de Exibição de Elementos no React usando Show e Hide

Muitas vezes, durante o desenvolvimento de aplicações React, nos deparamos com a necessidade de exibir ou ocultar elementos com base em determinadas condições. Para tornar esse processo mais simples e legível, podemos criar componentes reutilizáveis chamados Show e Hide, que nos permitirão controlar a exibição de elementos de forma mais intuitiva.

import React, { Fragment } from 'react';

type Visibility = {
  when: boolean;
  children: JSX.Element;
};

const Show: React.FC<Visibility> = ({ when, children }) =>
  when ? children : <Fragment />;

const Hide: React.FC<Visibility> = ({ when, children }) =>
  when ? <Fragment /> : children;

Vamos analisar a estrutura do código:

1. Começamos definindo uma interface chamada Visibility. Essa interface tem duas propriedades:

• when: Um valor booleano que indicará se o elemento deve ser exibido (true) ou ocultado (false).
• children: Uma propriedade do tipo JSX.Element, que representa o conteúdo que será exibido caso a condição seja atendida.

1. Em seguida, criamos o componente Show. Esse componente é uma função que recebe as propriedades da interface Visibility desestruturadas. Ele verifica a condição when e retorna o conteúdo children se a condição for verdadeira (true). Caso contrário, retorna um fragmento vazio (<Fragment />) para ocultar o elemento.

2. Depois, temos o componente Hide, que funciona de forma inversa ao Show. Ele também recebe as propriedades when e children, mas desta vez inverte a condição. Se when for verdadeiro, retorna um fragmento vazio, ocultando o elemento. Caso contrário, retorna o conteúdo children.

Agora que temos esses componentes definidos, podemos utilizá-los em qualquer lugar do nosso projeto React. Vamos dar um exemplo de uso para ilustrar como eles podem simplificar o controle de exibição de elementos:

import React, { useState } from 'react';

const ExampleComponent: React.FC = () => {
  const [isVisible, setIsVisible] = useState(true);

  const toggleVisibility = () => {
    setIsVisible((prevValue) => !prevValue);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>Toggle Visibility</button>

      {/* Usando o componente Show */}
      <Show when={isVisible}>
        <p>Este é o conteúdo exibido quando isVisible é true.</p>
      </Show>

      {/* Usando o componente Hide */}
      <Hide when={isVisible}>
        <p>Este é o conteúdo ocultado quando isVisible é false.</p>
      </Hide>
    </div>
  );
};

Neste exemplo, criamos um componente chamado ExampleComponent, que possui um botão para alternar a visibilidade do conteúdo. Quando o botão é clicado, o estado isVisible é alternado entre true e false, controlando assim a exibição ou ocultação dos elementos filhos dos componentes Show e Hide.

Essa abordagem torna o código mais legível, reutilizável e fácil de entender, especialmente quando temos lógica mais complexa