React-bootstrap-table2: expandRow.expanded undefined

Created on 5 Apr 2019  路  6Comments  路  Source: react-bootstrap-table/react-bootstrap-table2

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"/>
    }};
bug

Most helpful comment

RELEASE NOTE

Please update related packages listed in above notes, thanks

All 6 comments

+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

Has anyone solved this problem?

+1

Assign an empty array to expandRow.expanded to fix this. Hope helpful.

RELEASE NOTE

Please update related packages listed in above notes, thanks

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rsgoss picture rsgoss  路  4Comments

epsyan picture epsyan  路  4Comments

cnav007 picture cnav007  路  4Comments

prajapati-parth picture prajapati-parth  路  4Comments

Randore picture Randore  路  3Comments