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.

Possible duplicate of [Loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Andy Hoffner, Feb 05 '19 at 21:52

jcubic · Answer 1 · 2019-02-05T22:09:29.677

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>

edited Feb 05 '19 at 22:09

answered Feb 05 '19 at 21:55

jcubic

61,973
54
229
402

Just to add on top of that, if you want to add or remove this list of items, don't use index as key. In react index as a key is antipattern — for more info https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318 – Mohit Tilwani Feb 05 '19 at 22:01
@MohitTilwani that's way I've use something that look like id from data + index. – jcubic Feb 05 '19 at 22:04
I know but just want to say this explicitly as it could be the case that MOP is not unique, so just so that everyone knows why exactly it is like that. – Mohit Tilwani Feb 05 '19 at 22:05

score 0 · Accepted Answer · answered Feb 05 '19 at 22:02

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>
)

extract object items in object array at react template

2 Answers2