extract object items in object array at react template

Question

I'm newbies in react and javascript. I try to use this below data in react template. They're object array so i want to every items in this object array print separately in HTML (react template). Anyone can help me, i have code below, please help:

const fakeData = [
  {
    MOP: 'MOP',
    code: '#1180-xxxx',
    date: '10-08-2018',
    status: 'Pending Order',
  },
  {
    MOP: 'MOP1',
    code: '#1180-xxxx1',
    date: '11-08-2018',
    status: 'Pending Order',
  },
  {
    MOP: 'MOP2',
    code: '#1180-xxxx2',
    date: '12-08-2018',
    status: 'Pending Order',
  },
];

export class TransactionPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { fakeData };
  }

  render() {
    const { classes, intl } = this.props;
    return (
      <Page>
        <Helmet>
          <title>{intl.formatMessage({ ...messages.header })}</title>
          <meta
            name="description"
            content={<FormattedMessage {...messages.meta} />}
          />
        </Helmet>
        <PageContent>
          <Paper>
            <Grid container>
              <Grid item xs={12} sm={5} md={4} lg={3}>
                <List className={classes.list} disablePadding>
                  // show the item here
                </List>
              </Grid>

              <Hidden xsDown>
                <Grid item sm={7} md={8} lg={9}>
                  <Grid
                    container
                    direction="column"
                    spacing={16}
                    className={classes.details}
                  >
                    <Grid item xs={12} className={classes.center} />
                    <Grid item xs={12}>
                      <Typography variant="h6">CREDIT DEBIT</Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Divider />
                    </Grid>
                    <Grid item xs={12} />
                  </Grid>
                </Grid>
              </Hidden>
            </Grid>
          </Paper>
        </PageContent>
      </Page>
    );
  }
}

TransactionPage.propTypes = {
  intl: PropTypes.object.isRequired,
  dispatch: PropTypes.func.isRequired,
};

const mapStateToProps = createStructuredSelector({
  TransactionPage: makeSelectTransactionPage(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'TransactionPage', reducer });
const withSaga = injectSaga({ key: 'TransactionPage', saga });

export default compose(
  withStyles(styles),
  injectIntl,
  withReducer,
  withSaga,
  withConnect,
)(TransactionPage);

I want this code transform as output below in the page:

             <Grid container>
              <Grid item xs={12} sm={5} md={4} lg={3}>
                <List className={classes.list} disablePadding>

                  <ListItem button>
                    <span>MOP</span>
                    <span>#1180-xxxx</span>
                    <span>10-08-2018</span>
                    <span>Pending Order</span>
                    <ListItemSecondaryAction>
                      <ArrowIcon />
                    </ListItemSecondaryAction>
                  </ListItem>

                  <ListItem button>
                    <span>MOP1</span>
                    <span>#1180-xxxx1</span>
                    <span>11-08-2018</span>
                    <span>Pending Order</span>
                    <ListItemSecondaryAction>
                      <ArrowIcon />
                    </ListItemSecondaryAction>
                  </ListItem>

                  <ListItem button>
                    <span>MOP2</span>
                    <span>#1180-xxxx2</span>
                    <span>12-08-2018</span>
                    <span>Pending Order</span>
                    <ListItemSecondaryAction>
                      <ArrowIcon />
                    </ListItemSecondaryAction>
                  </ListItem>

                </List>
              </Grid>

i'm using react, how to loop them in react template.

Answer 1

You just create a map with JSX:

<List className={classes.list} disablePadding>
{fakeData.map((item, i) => <ListItem key={item.MOP+"_" + i} button>....</ListItem>) }
</List>

Answer 2

You can map it like this pseudo...

var formatted = fakeData.map((item, idx) => {
return(
 <ListItem key={idx}>
   <span>{item.MOP}</span>
   <span>{item.code}</span>
   <span>{item.date}</span>
   <span>{item.status}</span>
</ListItem>
)
})
 return(
 <List>
 {formatted}
 </List>
)