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](https://stackoverflow.com/questions/60661265/reactjs-populate-select-options-from-an-api-call/60661375#60661375). The nesting is just a matter of using `row.options.map` instead of `someArray.map`. — ggorlen, Feb 23 '21 at 00:54
This might be helpful for you https://stackoverflow.com/questions/32751810/html-nesting-select-options — Yadab, Feb 23 '21 at 00:56

score 5 · Answer 1 · answered Feb 23 '21 at 00:54

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

React map over nested array

1 Answers1