react how to add condition to map for get one result-CodePudding

Hey guys what i wanna do is i have two collection i want to compare them if return true display solved else display Available

My first collection :

    (5) [{…}, {…}, {…}, {…}, {…}]
    0:
    creatorUserId : "62f0eb420f2464344f019ab3",
    examname: "test exam",
    _id: "62f287dcee776e0f64687406"

My second collection :

 (2) [{…}, {…}]
 0:
 examId: "62f287dcee776e0f64687406"
 userId: "62f0eb490f2464344f019ab6"
 _id: "62fa8e8bdca7970649800c45"
 examReview: (3) [{…}, {…}, {…}]

okey now i want to compare like First collection: _id == Second collection examId

if this condition returns true that means some user(userId) solved that exam now i have to display them like if they solved test before state will be "Solved" if they did not "Available"

My code

 <Header>Status report</Header>
        <Table>
          <Tr>
            <Th>Exam Name</Th>
            <Th>Link</Th>
            <Th>Status</Th>
          </Tr>
          {examDatas.map((exam, index) => (
            <Tr key={index}>
              <Td>{exam.examname}</Td>
              <Td><Link to={`/quiz/${exam._id}`}><Button>Go to exam</Button></Link></Td>
              {userDatas.map((user) => (
                <Td>{exam._id == user.examId ? (<span>{"Solved"}</span>) : (<span>{"Available"}</span>)}</Td>
              ))}
            </Tr>
          ))}
        </Table>

My client image :

Table image

As you guys see status part is overflowing how can i solve this problem

I am working on it for so long i am open to any advice thanks for attention!

CodePudding user response：

On that column, you can search for the id

<Header>Status report</Header>
        <Table>
          <Tr>
            <Th>Exam Name</Th>
            <Th>Link</Th>
            <Th>Status</Th>
          </Tr>
          {examDatas.map((exam, index) => (
            <Tr key={index}>
              <Td>{exam.examname}</Td>
              <Td><Link to={`/quiz/${exam._id}`}><Button>Go to exam</Button></Link></Td>
         
                <Td>{userDatas.findIndex(u=> u.examId === exam._id) > -1 ? (<span>{"Solved"}</span>) : <span>{"Available"}</span>}</Td>
              ))}
            </Tr>
          ))}
        </Table>