← Alle AufgabenReact · Junior

Text zeigen und verbergen

Schreib eine Komponente ToggleText, die eine Prop text bekommt. Zuerst ist der Text verborgen, und der einzige Button heißt Show.

Ein Klick zeigt den Text und ändert die Beschriftung zu Hide, und der nächste Klick verbirgt den Text wieder.

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

Strg+Enter führt die Tests aus. Tab rückt ein; um den Editor per Tastatur zu verlassen, drücke Esc und dann Tab. Der Code wird in diesem Browser gespeichert.

Tests (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');