score:3

Accepted answer
  const blockCreate = (arr1, arr2) => {
    return arr1.company.map(item => {
      const src = arr2.companyDetails.find(a => a.id === item.id).logoUrl;
      return (
        <p>
          <span>ID {item.id} - </span>
          <br />
          {item.companyName}
          <span>
            <br />
            <img src={src} alt="pic"/>
          </span>
        </p>
      );
    });
  };

score:1

import React from "react";
import "./styles.css";

export default function App() {
  const arr1 = {
    company: [
      {
        id: "random1",
        companyName: "Apple"
      },
      {
        id: "random2",
        companyName: "Samsung"
      }
    ]
  };

  const arr2 = {
    companyDetails: [
      {
        id: "random1",
        companyName: "Apple",
        logoUrl: "img.com/url"
      },
      {
        id: "random2",
        companyName: "Samsung",
        logoUrl: "img.com/url"
      }
    ]
  };

  const blockCreate = (arr1, arr2) => {
    return arr1.company.map(item => {
      const src = arr2.find(a => a.id === item.id).logoUrl;
      return (
        <p>
          <span>ID {item.id} - </span>
          <br />
          {item.companyName}
          <span>
            <br />
            <img src={src} />
          </span>
        </p>
      );
    });
  };

  return (
    <div className="App">
      <div>{blockCreate(arr1, arr2)}</div>
    </div>
  );
}

score:1

  // Prepare the final data
  const hash = new Map();
  arr1.company.concat(arr2.companyDetails).forEach(obj => {
    hash.set(obj.id, Object.assign(hash.get(obj.id) || {}, obj));
  });

  const finalArray = Array.from(hash.values());

  const blockCreate = (finalArray) => {
   return arr3.map(item => {
     return (
      <p>
       <span>ID {item.id} - </span>
       <br />
       {item.companyName}
       <span>
        <br />
        <img src={item.logoUrl} alt="logo" />
       </span>
      </p>
     );
   });
  };

Related Query

More Query from same tag