CODEWITHSUNDEEP
javascriptreactjshtml-table
RamAlx
RamAlx

Reputation: 7334

Table inside table in react

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?

Upvotes: 0

Views: 6140

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281636

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

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104369

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

Upvotes: 0

Related Questions