<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 [data1, setData1] = React.useState(null)
  const [data2, setData2] = React.useState(null)

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

    // Using Promise.all to wait for both requests to complete
    Promise.all([fetchData1(), fetchData2()])
      .then(([result1, result2]) => {
        setData1(result1)
        setData2(result2)
      })
      .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>Data from Endpoint 1:</h1>
      <pre>{JSON.stringify(data1, null, 2)}</pre>

      <h1>Data from Endpoint 2:</h1>
      <pre>{JSON.stringify(data2, null, 2)}</pre>
    </div>
  )
}

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