Need Support - Event handling in expandable rows component : Unable to make onClick function work under expandable component

[shravankumartalabhaktula]

Hi,

First of all I'd like to apologise if this is not a right channel to ask support / help for issues.

Need help

My expandable component renders a list by using the data props sent with the component. The data is rendered via "ListGroupItem" from reactstrap library. When I place "onClick" function to the list item, that event handling / click function is not working. I'm struggling to find a way to pass function as a props to expandable component.

I need to have a click action in list item so that I'm would be able to capture my data id and send it back to my main component where all the actions takes place.

Code

handleSubTaskStatusUpdate = () => {
        console.log("From DataTable.js => handleSubTaskStatusUpdate")
}

const ExpanableComponents = ({ data }) => <ExpandableComponent data={data.subTasks} handleSubTaskStatusUpdate={this.handleSubTaskStatusUpdate} />;

<DataTable
                    columns={columns(this.props.handleMainTaskStatus, this.props.editTask)}
                    data={data}
                    noHeader={true}
                    fixedHeader={true}
                    fixedHeaderScrollHeight="300px"
                    expandableRows
                    expandableRowDisabled={row => row.disabled}
                    expandableRowsComponent={<ExpanableComponents />}
          />

Expandable component is here

render() {
        const {
            data,
            handleSubTaskStatusUpdate
        } = this.props;
        return (
            <Card>
                <CardBody>
                    <ListGroup>
                        {data ? (
                            data.map((item, index) => {
                                return (
                                    <ListGroupItem key={index} tag="button" action onClick={handleSubTaskStatusUpdate}>
                                        <span
                                            className="badge badge-light mr-2"
                                            style={item.status == "DONE" ? statusDoneStyle : null}
                                        >
                                            <i className="simple-icon-check" />
                                        </span>
                                        {item.name}
                                    </ListGroupItem>
                                );
                            })
                        ) : null}
                    </ListGroup>
                </CardBody>
            </Card>
        );
    }

Can you please point me out to the right directions or any hints / solutions would be highly appreciated. Once again I apologise if this is not a right platform to ask questions as I have searched for a while for support channel. Thank you so much.

[leungs420]

I would pass the function as a prop inside <DataTable ...your orig code expandableRowsComponent={<ExpanableComponents handleSubTaskStatusUpdate={ this.handleSubTaskStatusUpdate }/>} />

And call const ExpanableComponents = ({ props }) => < ExpandableComponent data={props.subTasks} handleSubTaskStatusUpdate={ props.handleSubTaskStatusUpdate } />;

Not too sure if thats the right way to do it or not but it should be working.

[shravankumartalabhaktula]

Hi @leungs420 Yes, I tried the same logic what you have referred in your response but still no luck.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.