CODEWITHSUNDEEP
reactjs
dmccaul
dmccaul

Reputation: 95

React map over nested array

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?

Upvotes: 1

Views: 243

Answers (1)

Drew Reese
Drew Reese

Reputation: 202721

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

Upvotes: 5

Related Questions