html, body {
  display: grid;
  justify-content: center;
  align-content: center;
  
  height: 100vh;
}

function App () {
  const items = [
    'Item 1',
    'Item 2',
    'Item 3'
  ]

  const listItems = items.map(item => <li key={item}>{item}</li>)
  const list = <ul>{listItems}</ul>
  
  function buttonHandler () {
    items.push(`Item ${items.length + 1}`)
  }
  
  return (
    <React.Fragment>
      <button onClick={buttonHandler}>Add Item</button>
      {list}
    </React.Fragment>
  )
}


const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)