Create a div beneath a table row when clicking that row with mapped data

Question

I have a table being populated by rows mapped by an array. I want to have an expanded view (or div) of data when I click a button in that row. I run into an issue where I can't have two table rows in the same .map iteration.

I'm thinking there are multiple ways of doing this.

I could swap a table row for a row that spans the width of the table with a div inside of it, using an if statement tied to the id the of the event I want to expand.

I could jquery a div underneath the table row (not sure how to accomplish this).

<tbody className={loading}>
      {this.state.events.map((event, id) => 
        <tr key={event.id}>
          <td>{event.data || ' '}</td>
          <td>{event.otherData}</td>
          <td><TimeStamp time={event.timestamp} /></td>
          <td><button onClick={() => this.onShowInfo(event)}>
            <i className="fa fa-search-plus" /></button></td>
        </tr>
      )}
    </tbody>

JSX makes it impossible to have two rows rendered in a map function

you cannot have a without both being wrapped by an element, and you cant wrap a tr inside of div inside of a tbody tag — Fred Chapman, Apr 17 '16 at 17:57
not for the return value but you can have two separate logic blocks and have one right below this one and it should work alright — ZekeDroid, Apr 17 '16 at 18:11

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

The soulution for your problem can be found here: How to return multiple lines JSX in another return statement in React?

Use this example:

{[1,2,3].map(function (n) {
  return ([
    <h3></h3>, // note the comma
    <p></p>
  ]);
})}

edited May 23 '17 at 11:59

Community

1
1

answered Apr 17 '16 at 17:57

Peter Cervienka

1
1

score 0 · Answer 2 · answered Apr 17 '16 at 18:15

0

Although you're right taht you can't RETURN more than one parent tr in your logic block, you can have multiple blocks so this would work just fine:

<tbody className={loading}>
      {this.state.events.map((event, id) => 
        <tr key={event.id}>
          <td>{event.data || ' '}</td>
          <td>{event.otherData}</td>
          <td><TimeStamp time={event.timestamp} /></td>
          <td><button onClick={() => this.onShowInfo(event)}>
            <i className="fa fa-search-plus" /></button></td>
        </tr>
      )}
      {this.returnSomeOtherTr()}
    </tbody>

Where returnSomeOtherTr is a function that returns some other <tr>.

answered Apr 17 '16 at 18:15

ZekeDroid

7,089
5
33
59

but I want to be able to render a row under a specific row to show more info about that row. your example just renders a separate row underneath the rest of the mapped rows – Fred Chapman Apr 17 '16 at 18:25
gotcha. what if instead of "swapping" trs you just updated it in your map of events? you could have a `processedEvents` array that had the "expanded" tr in place of the non expanded one. What is your current thought which JSX stops you from executing? – ZekeDroid Apr 17 '16 at 19:02

score 0 · Accepted Answer · answered Apr 18 '16 at 13:42

So instead of mapping through the array of events, I pushed each event into an array with a for loop. when the event that I wanted the details of came up, my for loop would push an additional row that occupied the entire span (through colSpan) so that I would have the appropriate space to work with.

eventRows(events){
  var eventsArray = []

  for (var ev of events) {
    eventsArray.push(
      <tr key={ev.id}>
      </tr>
    )
    if(ev.id === this.state.showInfo.id) {
      eventsArray.push(
        <tr>
          <td colSpan='5'>
          </td>
        </tr>
      )
    }
  }
}

Create a div beneath a table row when clicking that row with mapped data

3 Answers3