react-bootstrap-table2
react-bootstrap-table2 copied to clipboard
react-bootstrap-table
Warning: Using UNSAFE_componentWillReceiveProps
Describe the bug got this error in console: Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.
- Move data fetching code or side effects to componentDidUpdate.
- If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
Please update the following components: EditingCell
To Reproduce Steps to reproduce the behavior:
-
install both import BootstrapTable from 'react-bootstrap-table-next'; import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; 2.set up Bootstrap Table component as return ( <BootstrapTable keyField='id'
data={ rows } columns={ columns } bootstrap4={true} // striped noDataIndication={noDataIndication} hover // rowEvents={rowEvents} selectRow={ selectRow } cellEdit={cellEdit} /> ); -
Set up functions to handle row selection and checkboxes: function handleOnSelect(row, isSelect, rowIndex, e, id) { console.log("ROW ID: ", id) if (isSelect === true) { setSelectedStrategy(() => ({ ...selectedStrategy, id}));
} else { setSelectedStrategy(() => (selectedStrategy.filter(x => x !== row.id) )); } }
function handleOnSelectAll(isSelect, rows){ const ids = rows.map(r => r.id); if (isSelect) { setSelectedStrategy(() => ({ selectedStrategy: ids })); } else { setSelectedStrategy(() => ({ selectedStrategy: [] })); } }
const selectRow = {
mode: 'checkbox',
clickToSelect: true,
clickToEdit: true,
onSelect: handleOnSelect,
onSelectAll: handleOnSelectAll // Click to edit cell also
}
const cellEdit = cellEditFactory({
mode: 'click',
blurToSave: true,
selectionRenderer: ({ mode, rowIndex, ...rest }) => (
<input type={mode} id={row${rowIndex + 1}} {...rest} />
),
})
``
4. See error
- also see that ALL checkboxes are checked whenever click into ANY row.
codesandbox Please give a simple and minimal example on https://codesandbox.io so that we can reproduce it easily and handle it effectively
Is the Editing Cell warning causing the issues with the checkboxes? I am really liking the library so far.
