Myujth

I'm trying to render a component that takes data from a local API and it's been set it into multiple states, at the moment I'm mapping through one state and I need to use some data from another state. How can I access this data and map through it once?

In prodsLink='https://www.sodimac.cl/sodimac-homy/product/' + skuData.productId + '/'

I need to render something like this:

https://www.sodimac.cl/sodimac-homy/product/productID/productLocation

but if I do this:

prodsLink='https://www.sodimac.cl/sodimac-homy/product/' + skuData.productId + '/' + this.state.ids.map(skuMarca => skuMarca.marca)

It will render something like this:

https://www.sodimac.cl/sodimac-homy/product/productID/productLocation01,productLocation02,productLocation03,productLocation04

UPDATE:

This is the output I'm looking for (once per loop not all of them in one array):

<a href="https://www.sodimac.cl/sodimac-homy/product/productID/productLocation01"> BUTTON 01 </a>

<a href="https://www.sodimac.cl/sodimac-homy/product/productID/productLocation02"> BUTTON 02 </a>

<a href="https://www.sodimac.cl/sodimac-homy/product/productID/productLocation03"> BUTTON 03 </a>

<a href="https://www.sodimac.cl/sodimac-homy/product/productID/productLocation04"> BUTTON 04 </a>

I know is confusing so here is my code.

render() 

 return (
 this.getWebServiceResponse(this.state.ids.map(e => e.sku).join('-'), 96),
 this.state.active == true &&
 <div className="row" style= width: '89%', margin: '0 auto' >
 <div className="blockCatPriceSlide">
 this.state.products.map(skuData =>
 window.innerWidth > 440 && skuData.status === 'OK' ?
 <ContenidoUno
 prodsName=skuData.name.substr(0, 30) + '...'
 prodsId=skuData.productId
 prodsStatus=skuData.status
 prodsPublished=skuData.published
 prodsNormal=skuData.NORMAL.toLocaleString().replace(',', '.')
 prodsCMR=skuData.CMR
 prodsCombo=skuData.combo
 prodsAhorro=skuData.savings
 prodsStock=skuData.stockLevel
 prodsAntes=skuData.NORMAL + skuData.savings > skuData.NORMAL ? <small> Antes: $ skuData.NORMAL + skuData.savings </small> : ''.toLocaleString().replace(',', '.')
 prodsLink='https://www.sodimac.cl/sodimac-homy/product/' + skuData.productId + '/'
 prodsImg='https://picsum.photos/g/570/250'
 prodsIcon=
 catName=skuData.webCategoryName
 /> :
 <ContenidoUno
 prodsName='Producto sin información...'
 prodsId=''
 prodsStatus=''
 prodsPublished=''
 prodsNormal=''
 prodsCMR=''
 prodsCombo=''
 prodsAhorro=''
 prodsStock=''
 prodsAntes=''
 prodsLink=''
 prodsImg='https://picsum.photos/g/570/250'
 prodsIcon=''
 catName=''
 />

 )
 
 </div>
 </div>
 )
 
}

Array.prototype.map returns a new array, so in this situation you're just returning array of [marca?, marca?, ...], so instead of returning, marca? from map you should returning whole link like so:

prodsLink= this.state.ids.map(( marca ) =>
 `https://www.sodimac.cl/sodimac-homy/product/$skuData.productId/$marca`
)

this will generate link array:

[

https://www.sodimac.cl/sodimac-homy/product/$skuData.productId/$marca,
https://www.sodimac.cl/sodimac-homy/product/$skuData.productId/$marca,
https://www.sodimac.cl/sodimac-homy/product/$skuData.productId/$marca,

...

]