← All React exercises

React quiz · 16

Event callback

StatusNot taken

Question

What does the code snippet to the right output by console.log?

Code

exercise.tsx
1// This is a React Quiz from BFE.dev
2
3import * as React from 'react'
4import { useState } from 'react'
5import { createRoot } from 'react-dom/client'
6import { screen, fireEvent } from '@testing-library/dom'
7
8function App() {
9  const [state, setState] = useState(0)
10  const onClick = () => {
11    console.log('handler')
12    setState(state => state + 1)
13    console.log('handler ' + state)
14  }
15  console.log('render ' + state)
16  return <div>
17    <button onClick={onClick}>click me</button>
18  </div>
19}
20
21
22const root = createRoot(document.getElementById("root"));
23root.render(<App />);
24
25(async function () {
26  const action = await screen.findByText('click me')
27  fireEvent.click(action);
28})()