← All tasksReact · Junior

Show and hide text

Write a ToggleText component that receives a text prop. At first the text is hidden, and the only button says Show.

Clicking it shows the text and changes the label to Hide, and the next click hides the text again.

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

Ctrl+Enter runs the tests. Tab indents; to leave the editor with the keyboard, press Esc and then Tab. Your code is saved in this browser.

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