React map over nested array

Question

Im fetching an array of rows from firebase, with each row looking like the one below.

row = [
    {
      index: 1,
      body: 'description'
      options: ['option1', 'option2', 'option3']
     
    }
]

I'm currently rendering these rows to a table in React as so:

{this.state.rows.map((row) => (
  <TableRow key={row.visit}>
    <TableCell align="left">{row.index}</TableCell>
    <TableCell align="left">{row.body}</TableCell>
    <TableCell align="left">{row.options}</TableCell>
  </TableRow>))}

However, I'm trying to get the options to be in a dropdown or similar, so as to look neater and not take up too much vertical space. Is there a way to map through a nested array and output it into a dropdown?

Check out Populate select options from an array in React. The nesting is just a matter of using row.options.map instead of someArray.map. — ggorlen
– ggorlen, Commented Feb 23, 2021 at 0:54
This might be helpful for you stackoverflow.com/questions/32751810/… — Yadab
– Yadab, Commented Feb 23, 2021 at 0:56

Drew Reese · Accepted Answer · 2021-02-23 00:54:17Z

5

You can also map the nested data. I suggest using a select element.

{this.state.rows.map((row) => (
  <TableRow key={row.visit}>
    <TableCell align="left">{row.index}</TableCell>
    <TableCell align="left">{row.body}</TableCell>
    <TableCell align="left">
      <select>
        {row.options.map((option, i) => (
          <option key={i} value={option}>{option}</option>
        ))}
      </select>
    </TableCell>
  </TableRow>
))}

answered Feb 23, 2021 at 0:54

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

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

Collectives™ on Stack Overflow

React map over nested array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related