Array Doesnt Display All Of The Items Inside It React Javascript

I receive some info from an API based on some ids. there are 3 job objects, each job has an array of tags and in each array, there are some ids that get sent to the API to return t

Solution 1:

The data that you receive from promise.all will have multiple tags for same jobId so you cannot directly merge that object, instead you need to process it to convert it to an objectId to tags array mapping

const dData = awaitPromise.all(tPromises)
  const tags = dData.reduce((acc, item) => {
      const [key, value] = Object.entries(item)[0];
      if(acc[key]) {
         acc[key].push(value);
      } else {
         acc[key] = [value];
      }
      return acc;
  }, {})
  setTags(prev => ({...prev, ...tags}))

once you do that you can map over the tags and render them

   {tags[job.id] && tags[job.id].map(tag =><Colkey={tags[job.id].id}>Tags:{tag.name} </Col>)}