← Wszystkie zadaniaReact · Junior

Pokaż i ukryj tekst

Napisz komponent ToggleText, który dostaje props text. Na początku tekst jest ukryty, a jedyny przycisk ma napis Show.

Kliknięcie pokazuje tekst i zmienia napis na Hide, a kolejne kliknięcie znów ukrywa tekst.

function ToggleText({ text }) {
  // ...
  return null;
}

Ctrl+Enter uruchamia testy. Tab robi wcięcie; aby wyjść z edytora klawiaturą, naciśnij Esc, a potem Tab. Kod zapisuje się w tej przeglądarce.

Testy (3)

render(<ToggleText text="Secret" />);
expect(screen.queryByText('Secret')).toBe(null);
expect(screen.getByRole('button').textContent).toBe('Show');

render(<ToggleText text="Secret" />);
fireEvent.click(screen.getByRole('button'));
expect(screen.getByText('Secret')).toBeTruthy();
expect(screen.getByRole('button').textContent).toBe('Hide');

render(<ToggleText text="Secret" />);
fireEvent.click(screen.getByRole('button'));
fireEvent.click(screen.getByRole('button'));
expect(screen.queryByText('Secret')).toBe(null);
expect(screen.getByRole('button').textContent).toBe('Show');