CODEWITHSUNDEEP
javascriptreactjs
MazMat
MazMat

Reputation: 2094

Mapping inside of mapping

I've created a fake payload data for my app and I'm testing going through the payload with map() function. However while I can return correct number of divs after mapping with some of the data correct I cant find proper configuration for returning a payload ID. What am I doing wrong?

Database looks like this:

export default [
{
    payloadId: 0,
    drugsId:[0, 29],
    lat: 51.760549449821696,
    lon: 19.403501300000016
},
{
    payloadId: 1,
    drugsId:[3],
    lat: 52.760549449821696,
    lon: 17.403501300000016
},
{
    payloadId: 2,
    drugsId:[5, 19, 14, 31],
    lat: 53.760549449821696,
    lon: 29.403501300000016
},
{
    payloadId: 3,
    drugsId:[3, 9],
    lat: 53.760549449821696,
    lon: 16.403501300000016
}
]

My react component where I render the random payload looks like this (all correct data is passed from the parent):

import React from 'react';

class WherepothecaryPanel extends React.Component{
render(){

    const fakePayload = this.props.fakePayload;

    const rngPayloadId = Math.floor(Math.random()*4);


    console.log('Random payload id', rngPayloadId)


    const payload = fakePayload.map(payload =>{
        if(payload.payloadId === rngPayloadId){
           return payload.drugsId.map(drug => {
               return <div> Drug ID: {drug.drugsId}, lat: {payload.lat}, lon: {payload.lon} </div>
           })
        }
    })

    return(
        <div>
            <div id='wherepothecaryPanel' className='col-xs-8'>
                {payload}
            </div>
        </div>
    )
}
}

export default WherepothecaryPanel

In this configuration my return looks like this for example:

Drug ID: , lat: 51.760549449821696, lon: 19.403501300000016
Drug ID: , lat: 51.760549449821696, lon: 19.403501300000016

Upvotes: 2

Views: 51

Answers (1)

Zahidul Islam
Zahidul Islam

Reputation: 125

Try:

 const payload = fakePayload.map(payload =>{
    if(payload.payloadId === rngPayloadId){
       // you are mapping through ids, so just have to use as value {id}
       return payload.drugsId.map(id => {
           return <div> Drug ID: {id}, lat: {payload.lat}, lon: {payload.lon} </div>
       })
    }
})

Upvotes: 5

Related Questions