Trying to write a component that can use config object as dictionary to determine rendering style of list elements

I have a React component that gets back an array of objects representing different groups of items (example: Marvel Characters, DC Characters, Magic Cards, Comic Books) and displays them as either a list of text elements or a grid of photos.

I’m also getting back a configuration array of objects that lists each group and what it’s rendering style should be.

What I’m struggling to figure out is how I can use that configuration object as a dictionary to determine the rendering style of the elements.

My first thought was to pass the group elements like this groupsArray[configObject] and then use the return values in a switch like this:

switch(group.groupName){
   case "Marvel Characters":
   case "DC Characters":
       return grids.push(<GridView group={group} />);
   case "Magic Cards":
   case "Kaiju and Mechs":
       return lists.push(<ListView group={group} />);
   default: 
       return lists.push(<ListView group={group} />);
}

But I’m not sure that will work. Codesandbox for reference

As of now I have my switch statement hardcoded like this:

function renderList(groupsArray) {
  const grids = [];
  const lists = [];

  if (!groups) return null;

  groupsArray.map((group) => {
    switch (group.groupName) {
      case "Marvel Characters":
        return grids.push(<GridView group={group} />);
      case "Magic Cards":
        return lists.push(<ListView group={group} />);
      case "DC Characters":
        return grids.push(<GridView group={group} />);
      default:
        return null;
    }
  });

  const resources = grids.concat(lists);

  return resources;
}

This is the config object:

const itemGrouping = 
[
    {
      "groupName": "Marvel Characters",
      "groupType": "grid"
    },
    {
      "groupName": "DC Characters",
      "groupType": "grid"
    },
    {
      "groupName": "Magic Cards",
      "groupType": "list"
    },
    {
      "groupName": "Kaiju and Mechs",
      "groupType": "list"
    }
]

And this is the groupsArray structure:

groupsArray = [
  {
    groupName: "Marvel Characters",
    items: [{}, {}, {}]
  },
  {
    groupName: "DC Characters",
    items: [{}, {}, {}]
  }
]

Answer

Would this be something you are looking for?

function renderList(groupsArray) {
  const grids = [];
  const lists = [];

 
  if (!groups) return null;

  groupsArray.map((group) => {
     // we first determine which group it belongs.
     const grouping = itemGrouping.find( item => item.groupName === group.groupName);

      //then we render depending on the groupType
     if (grouping.groupType === 'grid') {
         grids.push(<GridView group={group} />)
     } else { 
         lists.push(<ListView group={group} />)
     }
    
  });

  const resources = grids.concat(lists);

  return resources;
}