CODEWITHSUNDEEP
reactjs
LOTUSMS
LOTUSMS

Reputation: 10240

pushing the specific table row data to a dialog in reactJS

I have a table that retrieves data from a json called approvalsData with fields name, type, and owners. Table pulls the data just fine. And the dialog opens. But I can't figure out how to pull that row data in the dialog. Not the entire json data, just the row I am clicking on.

What am I missing here? I'm guessing a lot :)

<TableBody>
    {approvalsData.map( (row, index) => (
        <TableRow
            key={index}
            onTouchTap={this.handleApprovalDialogOpen}>
            <TableRowColumn>{row.name}</TableRowColumn>
            <TableRowColumn>{row.type}</TableRowColumn>
            <TableRowColumn>{row.owner}</TableRowColumn>

            <Dialog
                modal={false}
                contentStyle={dialogStyle}
                open={this.state.open}
                onRequestClose={this.handleApprovalDialogClose}>

                <Col key={index}>
                    <div>Name: <span>{this.name}</span></div>
                    <div>Type: <span>{this.type}</span></div>
                    <div>Owner: <span>{this.owner}</span></div>
                </Col>
            </Dialog>
        </TableRow>
    ))}
</TableBody>

UPDATE

Inspecting the source, I realized that by including the Dialog inside the loop, I was displaying a dialog for every instance of the table rows. No wonder I was just seeing the last one. The others were behind it lol. ANyway, I moved it outside of the loop but now I can't reach the table row data from the table itself. I can reach the data by pointing to the json itself. The example below is showing the first index in the json, but that is not what I want. I want to show the row that I want to click on.

<TableBody>
    {approvalsData.map( (row, index) => (
        <TableRow
            key={index}
            onTouchTap={this.handleApprovalDialogOpen}>
            <TableRowColumn>{row.name}</TableRowColumn>
            <TableRowColumn>{row.type}</TableRowColumn>
            <TableRowColumn>{row.owner}</TableRowColumn>

        </TableRow>
    ))}
</TableBody>
<Dialog
    modal={false}
    contentStyle={dialogStyle}
    open={this.state.open}
    onRequestClose={this.handleApprovalDialogClose}>

    <Col>
        <div>Name: <span>{approvalsData[0].name}</span></div>
        <div>Type: <span>{approvalsData[0].type}</span></div>
        <div>Owner: <span>{approvalsData[0].owner}</span></div>
    </Col>
</Dialog>

See the webpackbin

Thanks in advance

Upvotes: 1

Views: 2398

Answers (2)

Stephen L
Stephen L

Reputation: 2339

@mukesh's approach looks solid. You're probably getting undefined because you're trying to access approvalsData with an index that does not exist. Try his solution and add:

<TableBody>
    {approvalsData.map( (row, index) => (
        <TableRow
            key={index}
            onTouchTap={(e) => this.handleApprovalDialogOpen(index, e)}>
            <TableRowColumn>{row.name}</TableRowColumn>
            <TableRowColumn>{row.type}</TableRowColumn>
            <TableRowColumn>{row.owner}</TableRowColumn>
        </TableRow>
    ))}
</TableBody>

Upvotes: 1

Mukesh Soni
Mukesh Soni

Reputation: 6668

I am assuming that you set the open state in handleApprovalDialogOpen callback. You can bind the callback to the index (or id if any) of the row.

// some code
        onTouchTap={this.handleApprovalDialogOpen.bind(this, index)}

<Dialog
    modal={false}
    contentStyle={dialogStyle}
    open={this.state.open}
    onRequestClose={this.handleApprovalDialogClose}>

    <Col>
        <div>Name: <span>{approvalsData[this.state.openRowIndex].name}</span></div>
        <div>Type: <span>{approvalsData[this.state.openRowIndex].type}</span></div>
        <div>Owner: <span>{approvalsData[this.state.openRowIndex].owner}</span></div>
    </Col>
</Dialog>

handleApprovalDialogOpen(rowIndex, event) {
  this.setState({open: true, openRowIndex: rowIndex})
}

Upvotes: 2

Related Questions