Es mejor si lo fusiona en una sola matriz y luego mapea eso

como esto

 const Array1 = [ {id:1, sold: 69, productName: 'Epic', image: 'someimage.svg' } , {id:2, sold: 121, productName: 'Legend', image: 'someimage.svg' } , {id:3, sold: 368, productName: 'Top', image: 'someimage.svg' } ] const Array2 = [ { productBrand: 'Chiquita' , productName: 'Epic' , productCategory:'Banana' } , { productBrand: 'Famoozo' , productName: 'Legend' , productCategory: 'Mango' } , { productBrand: 'PinkLady' , productName: 'Top' , productCategory: 'Apple' } ] const products = Array1.map(({productName, ...rest}) => { return { ...rest, ...Array2.find(p => p.productName === productName) || {} } }) console.log(products) //and then /*products.map((p) => <div> <img src={p.img} /> <p> {p.sold} sales </p> <p> {p.productBrand} </p> <p> {p.productName} </p> <p> {p.productCategory} </p> </div> ) </> */

Aquí está mi respuesta.

 {Array1.map((dataFromFirstArray, i) => Array2.map((dataFromSecondArray, j) => { if (j === i) { return ( <div> <p> {dataFromFirstArray.id}</p> <img src={dataFromFirstArray.image} /> <p> {dataFromFirstArray.sold} sales </p> <p> {dataFromSecondArray.productBrand} </p> <p> {dataFromSecondArray.productName} </p> <p> {dataFromSecondArray.productCategory} </p> </div> ); } }) )}

Está funcionando bien para mí, intente una vez en su extremo.

Así que supongo que la respuesta es bastante simple porque tenemos los datos de ambas matrices de esta manera:

 const Array1 = [ {id:1, sold: 69, productName: 'Epic' image: 'someimage.svg' } , {id:2, sold: 121, productName: 'Legend' image: 'someimage.svg' } , {id:3, sold: 368, productName: 'Top' image: 'someimage.svg' } ] const Array2 = [ { productBrand: 'Chiquita' , productName: 'Epic' , productCategory:'Banana' } , { productBrand: 'Famoozo' , productName: 'Legend' , productCategory: 'Mango' } , { productBrand: 'PinkLady' , productName: 'Top' , productCategory: 'Apple' } ]

En lugar de concatenarlo, lo mapeamos y buscamos las claves que coinciden. Así que esta es mi solución:

 let Array3 = totalSales.map((item, i) => Object.assign({}, item, soldStatsData[i]));

Y el resultado final es así:

 console.log(Array3) -------------------- [ { id:1, sold: 69, productName: 'Epic', productBrand: 'Chiquita', productCategory:'Banana' image: 'someimage.svg' } , { id:2, sold: 121, productName: 'Legend', productBrand: 'Famoozo', productCategory: 'Mango' image: 'someimage.svg', } , { id:3, sold: 368, productBrand: 'PinkLady', productName: 'Top', productCategory: 'Apple', image: 'someimage.svg' }