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"/>
}};
+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)
Same issue https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/893 . I will fix it soon
Has anyone solved this problem?
+1
Assign an empty array to expandRow.expanded to fix this. Hope helpful.
Please update related packages listed in above notes, thanks
Most helpful comment
RELEASE NOTE
Please update related packages listed in above notes, thanks