Greeting with an input

Write a Greeting component with an input labelled Name (via <label> or aria-label) and a paragraph below it.

The paragraph shows Hello, <name>!, where the name is the typed text without spaces at the ends. If the input is empty or contains only spaces, the paragraph shows Hello, stranger!.

function Greeting() {
  // ...
  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 (4)

render(<Greeting />);
expect(screen.getByText('Hello, stranger!')).toBeTruthy();

render(<Greeting />);
fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Anna' } });
expect(screen.getByText('Hello, Anna!')).toBeTruthy();

render(<Greeting />);
fireEvent.change(screen.getByLabelText('Name'), { target: { value: '  Bob  ' } });
expect(screen.getByText('Hello, Bob!')).toBeTruthy();

render(<Greeting />);
const input = screen.getByLabelText('Name');
fireEvent.change(input, { target: { value: 'Anna' } });
fireEvent.change(input, { target: { value: '' } });
expect(screen.getByText('Hello, stranger!')).toBeTruthy();
expect(input.value).toBe('');