<div id="root"></div>

import React from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'

const App = () => {  
  const [data, setData] = React.useState(null)

  React.useEffect(() => {
    const fetchData1 = () =>
      fetch('https://jsonplaceholder.typicode.com/users').then((response) =>
        response.json()
      )
    const fetchData2 = () =>
      fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
        response.json()
      )

    // Using Promise.race to get the result of the first resolved promise
    Promise.race([fetchData1(), fetchData2()])
      .then((result) => {
        setData(result)
      })
      .catch((error) => {
        console.error('Error fetching data:', error)
      })
  }, []) // Empty dependency array means this effect runs once after the initial render

  // Render the component with the fetched data
  return (
    <div>
      <h1>First Resolved Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

ReactDOM.render(<App />,
document.getElementById("root"))