Dynamic rendering React components using data from multiple JSON objects and arrays

Question

I am using React Native to dynamically render components. Currently the data is being taken by mapping over an array of objects which looks similar to:

const OBJECTS = [
{name: "Object 1", logo: require('../logos/object1.png')},
{name: "Object 2", logo: require('../logos/object2.png')},
{name: "Object 3", logo: require('../logos/object2.png')},
]

I then map over these objects to render a card for each object like so:

<View>
  {object.map(item => {
    return (
    <View key={item.key}>
      <Card>
        <Text>{item.name}</Text>
        <Image source={item.logo}/>
      </Card>
    </View>
        );
      })}
</View>

However now I would like to add additional items to each card which are taking information fetched from an API and retrieved in JSON form. These JSON objects look similar to the following:

Request 1:

fetchPriceActionCreator {
  "items": [{
      "objectId": "object1",
      "price": 10
    },
    {
      "objectId": "object2",
      "price": 5
    },
    {
      "objectId": "object3",
      "price": 20
    }
  ]
}

Request 2:

fetchBalanceActionCreator {
  "items": [{
      "objectId": "object1",
      "balance": 2,
      "account": 30022
    },
    {
      "objectId": "object2",
      "balance": 4,
      "account": 40035
    },
    {
      "objectId": "object3",
      "balance": 6,
      "account": 50021
    }
  ]
}

As the application is growing in complexity, you may notice from the action creators used to make the requests that I have begun to use Redux. My challenge is now figuring out a way to associate the retrieved JSON information, with the initial OBJECTS object array so that I can include this information in the relevant dynamically rendered card displaying the name, logo, balance, and price of each object.

From what I understand, I need to take the static information from the OBJECTS object array, and move this to initialState in either the reducer or store - however I am completely lost as to how to go about doing this, and how to then associate the two retrieved JSON object arrays, with the OBJECT object array.

The end result should look something like this:

<View>
  {object.map(item => {
    return (
    <View key={item.key}>
      <Card>
        <Text>{item.name}</Text>
        <Image source={item.logo}/>
        <Text>{item.price}</Text>
        <Text>{item.balance}</Text>
      </Card>
    </View>
        );
      })}
</View>

Any help would be greatly appreciated.

EDIT:

Currently my redux reducers look like so:

function priceReducer(priceState = {}, action) {
  switch (action.type) {
    case REQUEST_PRICE:
      return Object.assign({}, priceState, {
        isFetching: true,
        didInvalidate: false,
      });
    case RECEIVE_PRICE:
      return Object.assign({}, priceState, {
        isFetching: false,
        didInvalidate: false,
        lastUpdated: action.lastUpdated,
        items: action.items,
      });
    default:
      return Object.assign({}, priceState);
  }
}

Ahmed Khattab · Accepted Answer · 2020-05-28 22:35:52Z

1

in your redux store you can update the state by through merging the initial state and the data coming from the api, like so

const priceState = {
    // some other props
    OBJECTS: [
        { name: "Object 1", logo: require('../logos/object1.png') },
        { name: "Object 2", logo: require('../logos/object2.png') },
        { name: "Object 3", logo: require('../logos/object2.png') },
    ]  // your initial Data as you posted.
}

function priceReducer(priceState = {}, action) {
    switch (action.type)
    {
        case REQUEST_PRICE: {
            return {
                ...priceState,
                didInvalidate: false,
                isFetching: true,
                OBJECTS: priceState.OBJECTS.map((obj) => {
                    const i = action.items.find((item) => item.objectId == obj.name) || {}; // using the conditional operator to avoid runtime error if no item was found for the given object

                    // Example: current object name is "object1", i will the item inside the payload that will have the its objectId equal to "object1"
                    return {
                        ...obj,
                        ...i /// i will be the item inside the payload that has the same object id as the current object name 
                    }

                })

            }
        }

        case RECEIVE_PRICE: {
            return {
                ...priceState,
                didInvalidate: false, 
                lastUpdated: action.lastUpdated,
                OBJECTS: priceState.OBJECTS.map((obj) => {
                    const i = action.items.find((item) => item.objectId == obj.name) || {}; // using the conditional operator to avoid runtime error if no item was found for the given object

                    // Example: current object name is "object1", i will the item inside the payload that will have the its objectId equal to "object1"
                    return {
                        ...obj,
                        ...i /// i will be the item inside the payload that has the same object id as the current object name 
                    }

                })

            }
        }

     default: return priceState;
    }

}

if you are not sure what the ... is its called the spread operator., which is equivalent to Object.assign that you were using

edited May 28, 2020 at 22:35

answered May 28, 2020 at 21:54

Ahmed Khattab

2,7992 gold badges15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

GrapeJam Over a year ago

Thank you! I'm new to Redux, how would I go about implementing? Currently my redux looks like:

function priceReducer(priceState = {}, action) {   switch (action.type) {     case REQUEST_PRICE:       return Object.assign({}, priceState, {         isFetching: true,         didInvalidate: false,       });     case RECEIVE_PRICE:       return Object.assign({}, priceState, {         isFetching: false,         didInvalidate: false,         lastUpdated: action.lastUpdated,         items: action.items,       });     default:       return Object.assign({}, priceState);   } }

GrapeJam Over a year ago

I have edited the original post with the above as a snippet to make it easier for you to read :)

Ahmed Khattab Over a year ago

i have updated my answer to refelect on the code you wrote

GrapeJam Over a year ago

It returns the following error TypeError: Undefined is not an object (evaluating 'priceState.ASSETS.map')

Ahmed Khattab Over a year ago

what is your key name for the variable OBJECTS

|

Collectives™ on Stack Overflow

Dynamic rendering React components using data from multiple JSON objects and arrays

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related