Mapping through an object with arrays in React

Question

I would like to map through the array, so inside one of the column there would be only 3 items. So first there would be 3 items inside of the column, and then it would map through another column. Should I double map it somehow?

So it would be: Column div => 3 items maps inside => Column div

Data:

const files = {
    columnOne: [
      {
        item: {
          className: X,
          icon: X,
          typographyHeader: X,
          typographyDeemphasized: X,
        },
      },
      {
         item: {
          className: X,
          icon: X,
          typographyHeader: X,
          typographyDeemphasized: X,
        },
      },
      {
         item: {
          className: X,
          icon: X,
          typographyHeader: X,
          typographyDeemphasized: X,
        },
      },
    ],
    columnTwo: [
      {
         item: {
          className: X,
          icon: X,
          typographyHeader: X,
          typographyDeemphasized: X,
        },
      },
      {
         item: {
          className: X,
          icon: X,
          typographyHeader: X,
          typographyDeemphasized: X,
        },
      },
      {
        item: {
          className: X,
          icon: X,
          typographyHeader: X,
          typographyDeemphasized: X,
        },
      },
    ],
  };

Structure of the map so far:

const details = files.column.map((singleFile) => {
    return (
      <div className={classes.column}>
        <div className={classes.indicator}>
          <div className={classes.item}>
            <Icon fontSize="small" className={singleFile.item.className}>
              {singleFile.item.icon}
            </Icon>
            <Typography className={`${classes.header} ${classes.typography}`} variant="subtitle1">
              &nbsp;&nbsp;{singleFile.item.typographyHeader}
            </Typography>
          </div>
          <div className={classes.item}>
            <Icon fontSize="small" className={classes.hidden}>
              check_circle
            </Icon>
            <Typography className={`${classes.deemphasized} ${classes.typography}`} variant="body2">
              {singleFile.item.typographyDeemphasized}
            </Typography>
          </div>
        </div>
      </div>
    );
  });

Answer 1

Hope this is the Array that you are referring.

In this the key columnOne and columnTwo are dynamic.

const files = {
    columnOne: [
      {
        item: {
          className: X,
          icon: X,
          typographyHeader: X,
          typographyDeemphasized: X,
        },
      },
      {
         item: {
          className: X,
          icon: X,
          typographyHeader: X,
          typographyDeemphasized: X,
        },
      },
      {
         item: {
          className: X,
          icon: X,
          typographyHeader: X,
          typographyDeemphasized: X,
        },
      },
    ],
    columnTwo: [
      {
         item: {
          className: X,
          icon: X,
          typographyHeader: X,
          typographyDeemphasized: X,
        },
      },
      {
         item: {
          className: X,
          icon: X,
          typographyHeader: X,
          typographyDeemphasized: X,
        },
      },
      {
        item: {
          className: X,
          icon: X,
          typographyHeader: X,
          typographyDeemphasized: X,
        },
      },
    ],
  };

For the above structure the below mentioned state and render function will work...

Working Fiddle. https://jsfiddle.net/dj3k0pg6/

 this.state = {
  files: {
    columnOne: [
      {
        item: {
          className: 'X',
          icon: 'X',
          typographyHeader: 'Header 1',
          typographyDeemphasized: 'X',
        },
      },
      {
        item: {
          className: 'X',
          icon: 'X',
          typographyHeader: 'Header 2',
          typographyDeemphasized: 'X',
        },
      },
      {
        item: {
          className: 'X',
          icon: 'X',
          typographyHeader: 'Header 3',
          typographyDeemphasized: 'X',
        },
      },
    ],
    columnTwo: [
      {
        item: {
          className: 'X',
          icon: 'X',
          typographyHeader: 'Header 4',
          typographyDeemphasized: 'X',
        },
      },
      {
        item: {
          className: 'X',
          icon: 'X',
          typographyHeader: 'Header 5',
          typographyDeemphasized: 'X',
        },
      },
      {
        item: {
          className: 'X',
          icon: 'X',
          typographyHeader: 'Header 6',
          typographyDeemphasized: 'X',
        },
      },
    ],
  }
}
}



render() {
    const details = Object.keys(this.state.files).map((key) => {
      return this.state.files[key].map((file) => {
        return (
          <div className="column" key={file.item.typographyHeader}>
            <div className="indicator">
              <div className="item">
                {file.item.typographyHeader}
              </div>
            </div>
          </div>
        );
      })
    })
    return (
      <div>
        {details}
      </div>
    )
  }