CODEWITHSUNDEEP
javascriptreactjsecmascript-6
PeternDev
PeternDev

Reputation: 89

React rendering another table row with click dynamic

Hey Stack OverFlow community I am working on a React project where I am mapping over a set of table rows. Within every table row I have an additional row with more info about each individuals rows data. My issue is that when I click on the button to render additional information for that table it renders all of the additional informations for all of the rows.

I understand that my logic is implemented in a way where every single additional row will show upon a click. What can I do to fix this?

https://codesandbox.io/s/rj8o4r493n

showDrawyer = () => {
    let {showDrawyer} = this.state
    this.setState({
        showDrawyer: !showDrawyer
    })
}

renderTableCellData = () => {
    let { tableData } = this.props;
    return tableData.map((data, index) => {
      return (
        <Table.Body>
        <Table.Row style={{ height: 75 }}>
             <Table.Cell onClick={this.showDrawyer}>{data.name}</Table.Cell>
             <Table.Cell>{data.number}</Table.Cell>
             <Table.Cell>{data.date}</Table.Cell>
             <Table.Cell>{data.uid}</Table.Cell>
        </Table.Row>
            <Table.Row style={{display: this.state.showDrawyer ? '' : 'none' }}>
          <Table.Cell>Hidden Row data</Table.Cell>
          </Table.Row>
        </Table.Body>
      )
    })
}

Upvotes: 1

Views: 1676

Answers (2)

Yossi
Yossi

Reputation: 6027

The solution depends on whether you want (1) additional details to be displayed for multiple rows, or whether (2) once you click on one row, only this row's additional details will be shown, and hidden for the one clicked before.

For (1) Add to the tableData array a showDrawyer field which will be tested in order to know whether to display or not to display the additional info for this element.
OnClick should get as parameter the clicked array element and should toggle this element's showDrawyer value.

For (2) - the state variable that decides which row's additional details are displayed will be an index, rather than a toggle. This index will be checked for the additional details display.

Upvotes: 0

Gautam Naik
Gautam Naik

Reputation: 9378

state={
    shownDrawerIndex:null
}    

showDrawyer = (index) => {
        this.setState({
           shownDrawerIndex:index
        })
    }

    renderTableCellData = () => {
        let { tableData } = this.props;
        return tableData.map((data, index) => {
          return (
            <Table.Body>
            <Table.Row style={{ height: 75 }}>
                 <Table.Cell onClick={()=>this.showDrawyer(index)}>{data.name}</Table.Cell>
                 <Table.Cell>{data.number}</Table.Cell>
                 <Table.Cell>{data.date}</Table.Cell>
                 <Table.Cell>{data.uid}</Table.Cell>
            </Table.Row>
                <Table.Row style={{display: this.state.shownDrawerIndex == index ? '' : 'none' }}>
              <Table.Cell>Hidden Row data</Table.Cell>
              </Table.Row>
            </Table.Body>
          )
        })
    }

You will have to pass the index of the row on click.This will set the state to that index. React will re-render the component on set state. While doing this it will check for the drawer index value in state. According to that state value, it will display and hide the drawer

Upvotes: 6

Related Questions