How to return jsx for multiple arrays iterated?

October 11, 2022

I have the following arrays iterated and I’m able to console.log the result I want.

import React from 'react';

const MyApplications = ({ currentUser, jobs, jobApplications }) => {
   
 const jobAppsFromCurrentUser = jobApplications.filter(jobApp => jobApp.musician_id === currentUser.id)

  return (
    <div>
        <div>
          {
             jobs.filter(job => {
              jobAppsFromCurrentUser.map(jobApp => {
                if (jobApp.job_id === job.id) {
                  console.log(job)
                }
              })
            })
          }
        </div>
    </div>
  )
}

export default MyApplications

Result:

But ultimately, I need to render each job as jsx. I want to be able to do something like this (this doesn’t return anything):

      <div>
          {
             jobs.filter(job => {
              jobAppsFromCurrentUser.map(jobApp => {
                if (jobApp.job_id === job.id) {
                  return (
                    <div>
                       <h1>{job.title}</h1>
                    </div>
                  )
                }
              })
            })
          }
      </div>

>Solution :

First check if the ID’s match.

const includesID = (id) => {
    const onFilter = jobs.filter((item) => item.id == id);

    return onFilter.length > 0 ? true : false;
  };

And render it as

<div>
      {jobAppsFromCurrentUser.map((jobApp) => {
        if (includesID(jobApp.id)) {
          return (
            <div>
              <h1>{job.title}</h1>
            </div>
          );
        }
      })}
    </div>