React - jak wyświetlić lub ukryć element?

W tym artykule chcielibyśmy pokazać, jak wyświetlać lub ukrywać elementy w React.

Rozwiązanie z jednym przyciskiem

W poniższym przykładzie przedstawiamy proste rozwiązanie wykorzystujące przycisk, który ukrywa lub wyświetla nasz element <div>Mój element</div> .

Używamy hooka React.useState do przechowywania stanu naszego elementu (widoczny lub ukryty).
Domyślnie element jest ukryty. Aby zmienić jego widoczność, musimy przekazać zanegowany argument visible do funkcji onClick obsłującej zdarzenie.

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX.

// import React from 'react';

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div>
      <button onClick={() => setVisible(!visible)}>
        {visible ? 'Ukryj' : 'Wyświetl'}
      </button>
      {visible && <div>Mój element</div>}
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Rozwiązanie z dwoma przyciskami

W poniższym przykładzie przedstawiamy rozwiązanie z dwoma oddzielnymi komponentami przycisków do pokazywania i ukrywania elementu <div>Mój element</div>.

Używamy hooka React.useState do przechowywania stanu naszego elementu (widoczny lub ukryty).
Domyślnie element jest ukryty. Aby zmienić jego widoczność, tworzymy dwa przyciski, które po kliknięciu wywołują funkcję setVisible zmieniając argument visible na wartość true (aby nasz element był widoczny) lub false (aby go ukryć).

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// import React from 'react';

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div>
      <button onClick={() => setVisible(true)}>Wyświetl</button>
      <button onClick={() => setVisible(false)}>Ukryj</button>
      {visible && <div>Mój element</div>}
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );