import React, { useState, useEffect } from 'react'

const Deletee = () => {
  const [tasks, setList] = useState()
  const [description, setAnoterData] = useState()
  useEffect(() => {
    async function getData() {
      const res2 = await fetch('https://jsonplaceholder.typicode.com/posts/')
      setList(await res2.json())
      setTimeout(async () => {
        const res1 = await fetch('https://jsonplaceholder.typicode.com/todos')
        setAnoterData(await res1.json())
      }, 1000)
    }
    getData()
  }, [])
  return (
    <>
      <ul>
        {tasks &&
          tasks.map((task, idx) => {
            return (
              <li key={task.id} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                <span>{task.title}</span>
                {description && <strong>{description[idx].title + '!!!'}</strong>}
              </li>
            )
          })}
      </ul>
    </>
  )
}

export default Deletee