Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

expandRow.expanded undefined

See original GitHub issue

i get this error after fetching data from remote server. The data is valid (works fine if i remove expand row). This is how i configured all

"react-bootstrap-table-next": "^3.1.0",
"react-bootstrap-table2-overlay": "^1.0.0",
"react-bootstrap-table2-paginator": "^2.0.4",
"react-bootstrap-table2-toolkit": "^1.4.0",


        <BootstrapTable
                remote
                pagination={_paginationFactory}
                fetchInfo={ { dataTotalSize: this.state.totalDataSize } }
                onTableChange={ this.onTableChange }
                columns={customerColumn}
                data={customerData}
                keyField={"key"}
                containerClass={'index-customer-class'}
                noDataIndication={ () => <NoDataIndication /> }
                loading = {loading}
                overlay={_overlayFactory}
                expandRow={expandRow}
            />

           const expandRow = {
            renderer: row => { 
        console.log(row);
        return(
        <table className="inner-table">
            <thead>
            <tr>
                <th>Solution</th>
                <th>version</th>
                <th>Accounts
                    <i id="PopoverSearchAccount" className="fas fa-info-circle ml-1" ></i>
                    {popoverAccount}
                </th>
            </tr>
            </thead>
            <tbody>
            {row.solutions.map(solution => {
                let solutionName =`${solution.name.name} version: ${solution.version}`;
                let key = `solution_${solution.id}`;
                let accounts = solution.accountInSolution.map(account=>{
                    console.log(account);
                    let accountkey = `account_${account.id}_${key}`;
                    return <a href="#" key={accountkey} onClick={() => row.onClickAccount(account.accountnumber)}>{account.accountnumber} </a>
                });
                //accounts.unshift(<i className="fas fa-info-circle" data-container="body" data-toggle="popover" data-placement="top" data-content="Click on account number to search all customer that use the account."></i>);
                return (
                    <tr key={key} >
                        <td><span>{solution.name.name}</span></td>
                        <td><span>{solution.version}</span></td>
                        <td>
                            {accounts}

                        </td>
                    </tr>)
            })}
            </tbody>
        </table>
    )},
    showExpandColumn: true,
    onlyOneExpanding: true,
    expandByColumnOnly: true,
    expandHeaderColumnRenderer: ({ isAnyExpands }) => {
        if (isAnyExpands) {
            return <i className="fas fa-minus-circle link"/>
        }
        return <i className="fas fa-plus-circle link"/>
    },
    expandColumnRenderer: ({ expanded }) => {
        if (expanded) {
            return <i className="fas fa-minus-circle link"/>

        }
        return <i className="fas fa-plus-circle link"/>
    }};

Issue Analytics

State:
Created 4 years ago
Reactions:3
Comments:6 (2 by maintainers)

Top GitHub Comments

3reactions

AllenFangcommented, Apr 15, 2019

RELEASE NOTE

Please update related packages listed in above notes, thanks

2reactions

yongh00ncommented, Apr 5, 2019

+1 Please, prioritize this! The issue started to happen at 3.1.0.

syncup.min.js:22451 Uncaught TypeError: Cannot read property 'reduce' of undefined
    at RowExpandProvider.componentWillReceiveProps (syncup.min.js:22451)
    at callComponentWillReceiveProps (vendor.min.js:82558)
    at updateClassInstance (vendor.min.js:82768)
    at updateClassComponent (vendor.min.js:85811)
    at beginWork (vendor.min.js:86761)
    at performUnitOfWork (vendor.min.js:90429)
    at workLoop (vendor.min.js:90469)
    at HTMLUnknownElement.callCallback (vendor.min.js:71266)
    at Object.invokeGuardedCallbackDev (vendor.min.js:71316)
    at invokeGuardedCallback (vendor.min.js:71373)
    at replayUnitOfWork (vendor.min.js:89695)
    at renderRoot (vendor.min.js:90585)
    at performWorkOnRoot (vendor.min.js:91459)
    at performWork (vendor.min.js:91371)
    at performSyncWork (vendor.min.js:91345)
    at requestWork (vendor.min.js:91214)

https://github.com/react-bootstrap-table/react-bootstrap-table2/blame/fcefcf8c84b8e9734e6986cfe26324a8f4429e0f/packages/react-bootstrap-table2/src/contexts/row-expand-context.js#L20

Top Results From Across the Web

React bootstrap table2 expanding one row updating the value ...

I have a requirement to call the API to retrieve the value and show value when the expand row is selected. Each row...

expandRow does not update row's expanded property

If the user expanded the row, then the row.expanded is true, but if the expandRow expanded the row, then row.expanded remains undefined.

dxDataGrid - Expand/Collapse a detail row in the onRowClick

I have a master-detail datagrid and am able to expand the detail when I click a row by the following code: onSelectionChanged: function...

Row Expand Props · react-bootstrap-table2

Specify the content of expand row, react-bootstrap-table2 will pass the two arguments and expect to return a react element: row : Currnet row...

aria-expanded - Accessibility - MDN Web Docs - Mozilla

The grouping element this element owns or controls is expanded. undefined (default). The element does not own or control a grouping element that ......