Render array data in table inside return of a function - Reactjs Javascript

Question

I am just learning reactjs and javascript and trying to render a table with the array data I have.

I found an example for material UI as to how they have done it, but have constant array put in.

My array object looks like this : Array = [Object, Object, Object, Object, Object] (5) in detail : Array>

0 {RowNumber: 1, AssetId: 324, TagNumber: "", SerialNumber: "776", …}
1 {RowNumber: 2, AssetId: 233, TagNumber: "", SerialNumber: "32", …}
2 {RowNumber: 3, AssetId: 266, TagNumber: "", SerialNumber: "45", …}
3 {RowNumber: 4, AssetId: 887, TagNumber: "", SerialNumber: "23", …}
4 {RowNumber: 5, AssetId: 44, TagNumber: "", SerialNumber: "23", …}

I have following array :

myResponse = [];

Following is the code from the material UI that I was trying to customize but is not working for me :

  const classes = useStyles();
  getAssetList();
  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <StyledTableCell>RowNumber</StyledTableCell>
            <StyledTableCell align="right">AssetId</StyledTableCell>
            <StyledTableCell align="right">TagNumber</StyledTableCell>
            <StyledTableCell align="right">SerialNumber</StyledTableCell>
            <StyledTableCell align="right">xyz</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {myResponse.map(res => (
            <StyledTableRow key={res[0]}>
              <StyledTableCell component="th" scope="row">{res[0]}</StyledTableCell>
              <StyledTableCell align="right"><Link to={"/assetlist"} style={{ textDecoration: 'none' }}>{res[1]}</Link></StyledTableCell>
              <StyledTableCell align="right">{res[2]}</StyledTableCell>
              <StyledTableCell align="right">{res[3]}</StyledTableCell>
              <StyledTableCell align="right">{res[4]}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

I am not sure how I can render the data in the array myResponse correctly in the table. The above code did not work for me correctly.

Can somebody point me to some good tutorial to understand this and also show me how can I achieve this correctly please ?

Thanks.

Greg Brodzik · Accepted Answer · 2019-07-18 02:40:55Z

1

Map will iterate over your array, and render a component for each element -- in this case your StyledTableRow. So on each iteration, you will have access to the element -- i.e. the object -- at the index. The 'res' you are trying to access via an index is actually one of your elements in the array, i.e., one of your objects (map is already handling the iteration) I've deconstructed the object to make it a bit easier to work with in terms of accessing its properties. Not entirely sure how you want to display the data from the properties, but the concept is there.

 {myResponse.map(({ RowNumber, AssetId, TagNumber, SerialNumber }) => (
            <StyledTableRow key={RowNumber}>
              <StyledTableCell component="th" scope="row">{RowNumber}</StyledTableCell>
              <StyledTableCell align="right"><Link to={"/assetlist"} style={{ textDecoration: 'none' }}>{RowNumber}</Link></StyledTableCell>
              <StyledTableCell align="right">{AssetId}</StyledTableCell>
              <StyledTableCell align="right">{SerialNumber}</StyledTableCell>
              <StyledTableCell align="right">{TagNumber}</StyledTableCell>
            </StyledTableRow>
          ))}

edited Jul 18, 2019 at 2:40

answered Jul 18, 2019 at 2:21

Greg Brodzik

1,81710 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chinmay Over a year ago

It worked ! Thank you so much for such a great and detailed explanation. Helped a lot understanding the concept.

Greg Brodzik Over a year ago

Absolutely! glad to help

Collectives™ on Stack Overflow

Render array data in table inside return of a function - Reactjs Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related