ReactJS view handling on same component with different data

Question

I have an array of object which iterated using map to show respecting value of each object inside the array.

arrOfObj = [
  {name:"left",value:"Value of content left"},
  {name:"mid",value:"Value of content mid"},
  {name:"right",value:"Value of content right"}
]

Let's say I have a component "Card" that receive array of object from props, and then render received props value as rows of each key and object.

1. Left | Value of content left
2. Mid | Value of content mid
3. Right | Value of content right

...in a 1 column view.

Now let say I wanted it to show it as separate 3 column, and I read the 'name' to decide which one its belongs to. So it became like :

1. Value of content left | Value of content mid | Value of content right

My question is, should I render the "Card" 3 times (which is looks like the obvious solution), but then what about if I wanted to do an API call inside each component, but only used it on 1 side (left/mid/right) only. How to make it not called three times?

Any help would be appreciated

Answer 1

You can solve this case with compound component pattern

Here is an article that describes it :

https://blog.logrocket.com/guide-to-react-compound-components-9c4b3eb482e9