Creating rows of data from given array in JS React

Question

I am trying to apply TableRow of MUI. The array that I get from the database looks like below,

a = 
    [
      {
       id: 'aa',
       name: 'JJ',
       participants: 32
      },
      {
       id: 'aabb',
       name: 'JJbb',
       participants: 342
      },
      {
       id: 'bb',
       name: 'cc',
       participants: 332
      },
    ]

 {a[0] === undefined ? <p>No event has been found</p> : a.map((aa) => {
          <StyledTableRow key={aa.name} className={classes.tableRow}>
            <StyledTableCell component='th' scope='row'>
              {aa.id}
            </StyledTableCell>
            <StyledTableCell align='right'>{aa.id}</StyledTableCell>
            <StyledTableCell align='right'>{aa.participants}</StyledTableCell>
          </StyledTableRow>
        })
        }

It does not show the list of the events in that table. If I try with MUI example, then it works.

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

{rows.map((row) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                asdf
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}

Even if I replace {aa.name}, {aa.participants}, {aa.id} to like aaa, asdf, 234, it does not display the table. Moreover, if I check the array a, it shows the correct objects inside the .map(). What is my mistake over here?

Nitsew · Accepted Answer · 2020-10-15 19:52:30Z

2

In your map function, you aren't actually returning the values. Try this:

a.map((aa) => {
  return (
    <StyledTableRow key={aa.name} className={classes.tableRow}>
      <StyledTableCell component='th' scope='row'>
        {aa.id}
      </StyledTableCell>
      <StyledTableCell align='right'>{aa.id}</StyledTableCell>
      <StyledTableCell align='right'>{aa.participants}</StyledTableCell>
    </StyledTableRow>
  )
})

In the example from MUI, they are using implicit returns. Your example uses a code block, which requires a return statement.

You can read more about implicit returns here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Function_body

edited Oct 15, 2020 at 19:52

answered Oct 15, 2020 at 19:48

Nitsew

3,6821 gold badge19 silver badges21 bronze badges

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

3 Comments

chichi Over a year ago

Dang, it works. But then, how come MUI example rows.map() does not have return () but it still works?

Gabriel Nadaleti Over a year ago

Arrows functions have implicit return for one lined functions like x => <h2>{x}</h2> i means the same as x => { return <h2>{x}</h2> }

Nitsew Over a year ago

@GIHYUNNAM Check my edit, I updated my answer to include a further explanation and a resource.

Collectives™ on Stack Overflow

Creating rows of data from given array in JS React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related