Puedes hacer array.find dentro del map ( codesandbox ) -

 {teamSliderContent.map((item) => ( <p key={item.id}> {item.Title} <img width={100} height={100} alt="pizza" src={ pizzaSlicesContent.find((slice) => slice.id === item.id) .sliceRight } /> </p> ))}

El único problema es que la matriz pizzaSlicesContent tiene diferentes nombres de propiedad, sliceUp , sliceDown , sliceLeft y sliceRight .

Esto se puede lograr utilizando el operador de propagación en JavaScript.

 let newArray = teamSliderContent.map((teamSlider) => { return ({ ...teamSlider, pizzaSlicesContent: pizzaSlicesContent }) })

En el código anterior, usando el operador de propagación en el objeto teamSlider , estamos creando un nuevo objeto JavaScript con todas las propiedades del objeto teamSlider (copia superficial) y pizzaSlicesContent .

Esta función hará el truco:

 /** * Zips and merges two object arrays * @param {Array<object>} a * @param {Array<object>} b * @returns */ function mergeZip(a, b){ return a.map((itemA, index) => ({...itemA, ...b[index]})) }

Lo que quiere hacer es zip() (así es como se llama la función incorporada para esto en Python) y al mismo tiempo fusionar los dos objetos dentro de ambas matrices.

La forma más fácil de zip() , suponiendo que ambas matrices tengan la misma longitud, es usar map() . La devolución de llamada de map() proporciona tanto el elemento dentro de la matriz que actualmente se repite como un índice. Usando ese índice, puede obtener el valor de la segunda matriz en la misma posición y luego usar la sintaxis extendida para fusionar los objetos.

Aquí la función utilizada para su caso de uso:

 const teamSliderContent = [ { Describtion1: "Chef. Mordy Wenk", Title: "Head of the Chief staff.", id: 1, }, { Describtion1: "Chef. Mark Brunnett", Title: "Junior chef.", id: 2, }, { Describtion1: "Chef. Griffin Zach", Title: "a Talented Chef.", id: 3, }, { Describtion1: "Chef. Will Smith", Title: "a Talented Chef.", id: 4, }, ]; const pizzaSlicesContent = [ { sliceUp: "https://user-images.githubusercontent.com/86873404/169595266-b0085f5c-cdd9-4f96-93b0-49edcc08fa72.png", id: 1, }, { sliceLeft: "https://user-images.githubusercontent.com/86873404/169595240-fe7f4c80-c8c3-44f6-9cc8-4fec55587f87.png", id: 2, }, { sliceDown: "https://user-images.githubusercontent.com/86873404/169595250-a5692462-8aec-43f8-91a8-a042d9dd35db.png", id: 3, }, { sliceRight: "https://user-images.githubusercontent.com/86873404/169595259-e8cc76a8-437c-4260-9d53-aaefd606173b.png", id: 4, }, ]; /** * Zips and merges two object arrays * @param {Array<object>} a * @param {Array<object>} b * @returns */ function mergeZip(a, b){ return a.map((itemA, index) => ({...itemA, ...b[index]})) } const result = mergeZip(teamSliderContent, pizzaSlicesContent) console.log(result)

 .as-console-wrapper { max-height: 100% !important; top: 0; }