Здесь два варианта.
1. Изначально правильно сформировать данные, а потом отрисовать через map, это дольше, т.к. неск-ко запросов, но проще вывести одним .map().
2. Отрисовать начальные данные, а description и remainTime отрисуются позже, как придут (чтобы не было ошибки по обращению к null нужно использовать условную отрисовку)
Второй вариант - сначала получаем одни данные, а потом позже придут другие. Благодаря {
description && отрсиуются позже без ошибки. Чтобы отрисовывать из разных данных, использую idx (если данные в обоих массивах идут в одинаковом порядке)
Пример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