Table inside table in react

Question

I have a table which contains another table in reactjs. I've inserted a button inside each row of the outer table and when I clicked this I trigger an action for showing the nested table. My code is like this:

{slipsList.map((slip, i) =>
              <tbody>
                <tr key={i}>
                  <td className="table-sticky--first-col">
                    {slip.confirmationDate}
                    <button
                      type="button"
                      onClick={() => hideButtonClicked()}
                    >{i}</button>
                  </td>
                  <td>
                    {slip.slipNumber}
                  </td>
                  <td>
                    {slip.country}
                  </td>
                  <td>
                    {slip.side}
                  </td>
                  <td>
                    {slip.grossAmount}
                  </td>
                  <td>
                    {slip.commission}
                  </td>
                  <td>
                    {slip.feesPerStampDuty}
                  </td>
                  <td>
                    {slip.tax}
                  </td>
                  <td>
                    {slip.netAmount}
                  </td>
                  <td>
                    {slip.netAmountEuro}
                  </td>
                </tr>
                <tr
                  className={classnames({ hide_element: slipsHide })}
                >
                  <td colSpan="10">
                    {renderInside(slip)}
                  </td>
                </tr>
              </tbody>
            )}

When a user clicks the button in a row this row must collapse. My problem is that with my implementation when I click the button all the rows of the table are collapsed. My renderInside function is the following:

<tbody>
          <tr>
            <td>
              {renderInstrumentInfo(slip.prodType,
              slip.symbol, slip.exchange,
              slip.country, slip.name)}
            </td>
            <td>{slip.type}</td>
            <td>{slip.quantity}</td>
            <td>{slip.price}</td>
            <td>{slip.amount}</td>
          </tr>
        </tbody>

Any ideas?

what is slipsHide in this line, className={classnames({ hide_element: slipsHide })} . Can you show ur constructor ? — Mayank Shukla
– Mayank Shukla, Commented Apr 11, 2017 at 9:53
slipHide is a boolean value. When i click the button it becomes true or false and the hide_element class is applied or not — RamAlx
– RamAlx, Commented Apr 11, 2017 at 10:00

Shubham Khatri · Accepted Answer · 2017-04-11 10:57:14Z

1

Passing the index of the row that you want to show or hide will help

Set up an onClick method and pass the index like

<button
  type="button"
  onClick={() => hideButtonClicked(i)}
>{i}</button>

And in redux mapDispatchToProps(), pass an argument to get the index and pass it like

mapStateToProps = dispatch => (
      {hideButtonClicked: (index) => {
                dispatch(expandCollapseClicked('slips', index))
           }
      })

answered Apr 11, 2017 at 10:57

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

9 Comments

RamAlx Over a year ago

With that way i need to redefine my action export function expandCollapseClicked(component) { return { type: EXPAND_COLLAPSE_CLICKED, payload: { component } }; }

Shubham Khatri Over a year ago

Yes you will need to do that so that you can handle individual rows differently

RamAlx Over a year ago

Is there a more rapid way to achieve this? Maybe call className inside the other function. I dont want to change the expand collapse action because i use it in many components

Shubham Khatri Over a year ago

You can simply create a new function that does it for you and whose implementation is the same as expandCollapse function and use that,

RamAlx Over a year ago

I made it but it doesnt work, the className={classnames({ hide_element: slipsHide[i] })} applies the value true or false to all the rows of the nestred table

|

Mayank Shukla · Accepted Answer · 2017-04-11 10:07:32Z

0

Reason is, you are using single bool for all the rows, instead of that use an array of bool values, each value for each row, like this:

<tr
   className={classnames({ hide_element: slipsHide[i] })}
>

And onClick of button change only that particular bool, not the all values. To update the specific value you need to pass the index of each item into onClick method, like this:

<button
  type="button"
  onClick={() => hideButtonClicked(i)}
>{i}</button>

Now use this index in hideButtonClicked method:

hideButtonClicked(index){
  //now update only slipsHide[index]
}

answered Apr 11, 2017 at 10:07

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

5 Comments

RamAlx Over a year ago

I've thought of your idea but i have a problem. My hideButtonClicked is generated through mapDispatchToProps like this: const mapDispatchToProps = dispatch => ( { hideButtonClicked: () => { dispatch(expandCollapseClicked('slips')); } } );. How to add i when i dispatch it? Sorry for the foolish question but i'm pretty new to react and js :)

RamAlx Over a year ago

and slipHide through mapStateToProps like this: slipsHide: userSettingsState(state).get('slipsHide')

Mayank Shukla Over a year ago

@Shubham i don't know much about redux, answered this ques, he is using const mapDispatchToProps help him to pass index in onclick method, check the above comment how he is handling the events.

Shubham Khatri Over a year ago

change definition to mapStateToProps = dispatch => ({hideButtonClicked: (index) => {dispatch(expandCollapseClicked('slips', index))}})

Mayank Shukla Over a year ago

please add that in a separate answer.

Collectives™ on Stack Overflow

Table inside table in react

2 Answers 2

9 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related