score:18
this has nothing to do with material-table
or react
. most probably this is related to your api response having object.preventextensions()
applied on it for some reason, maybe this is an axios
behavior. so when material-table
is trying to add an id
field to each object, it's facing this error.
although not optimal, try to copy your api data to a new array of objects so material-table
can modify them, e.g:
const editable = rows.map(o => ({ ...o }));
<materialtable
columns={columns}
data={editable}
...
/>
note that i didn't use
rows.map(o => o)
as this will copy the array with the same objects references
edit:
it's worth mentioning that using spread operator or object.assign will only give a shallow copy, i.e. will not copy nested objects. one work-around for this is to use json.parse(json.stringify(object))
. please note that this would cause some data loss, other alternatives are on this answer:
what is the most efficient way to deep clone an object in javascript?
score:0
i got this error while passing the array data in the material data table
i was using reduxjs/toolkit
as the object are not modifiable ,due to internal implementation of object.freeze()
by
reduxjs/toolkit
const {cyclelist}=json.parse(json.stringify(useselector(state=>state.cycleslice)));
i used above method to create a new copy of the object.
score:3
import { setautofreeze } from 'immer'; setautofreeze(false);
worked for me. material table should consider an api that plays well with immer
score:21
you are most likely using immer
or a library that uses immer
under the hood (like @reduxjs/toolkit
). immer
uses object.freeze
to make the objects it produces immutable.
material-table
modifies its own props (which is a very ugly antipattern). when libraries break rules, they won't work with libraries that try to enforce them.
there is no way to unfreeze an object that has been frozen, but you have a couple of options:
find a way to disable freezing in the immer instance (check out the api docs of whatever you think might have frozen your state).
override
object.freeze
making it do nothing (very hacky, should be avoided - and yet it might be your best shot here):
window.object.freeze = function(obj) { return obj }
- clone/deep copy your state before passing it to
materialtable
. this is also far from ideal, especially if you have a lot of data.
Source: stackoverflow.com
Related Query
- React : cannot add property 'X', object is not extensible
- Material-table TypeError: Cannot add property tableData, object is not extensible
- Uncaught TypeError: Cannot add property 0, object is not extensible at Array.push
- TypeError: Cannot add property __gsap, object is not extensible (Gatsby + GSAP)
- Cannot add property key, object is not extensible error Apollo Client with antd
- TypeError: Cannot add property x, object is not extensible
- TypeError: Cannot add property transform, object is not extensible
- TypeError: Cannot add property Quantity, object is not extensible
- Node.js React: Can't add property context, object is not extensible
- React Error (TypeError): Can't add property context, object is not extensible
- React JS how to fix cannot add property updater, object is not extensible, when using 'This'
- TypeError: can't define property "current": Object is not extensible
- Cannot access data property of Axios response object after successful GET request: Property 'data' does not exist on type 'void'
- Uncaught TypeError: can't define property "x": Object is not extensible
- can not assign new property in react , got ` can't add property yyy, object is not extensible`
- Add Icon To Title Property of Material Table
- Cannot read property 'elements' of undefined in react: event object not being passed correctly
- TypeError during Jest's spyOn: Cannot set property getRequest of #<Object> which has only a getter
- Object is not extensible error when creating new attribute for array of objects
- Travis/Jest: TypeError: Cannot assign to read only property 'Symbol(Symbol.toStringTag)' of object '#<process>'
- TypeError when using React: Cannot read property 'firstChild' of undefined
- React changing props on grandchildren: object is not extensible / tree traversing react children
- jest spyOn not working on index file, cannot redefine property
- Jest: Cannot spy the property because it is not a function; undefined given instead
- Uncaught TypeError: Cannot assign to read only property '' of object '#<Object>'
- TypeError: Cannot assign to read only property 'x' of object '#<Object>' React/JEST
- Unhandled Rejection (Error): Cannot assign to read only property 'getPosts' of object '#<Object>'
- Limiting table selects not working - material UI table - react
- Cannot call `this.setState` with object literal bound to `partialState` because string [1] is compatible not with string literal [2]
- typeError: Cannot assign to read only property 'paths' of object for compilerOptions in tsconfig
More Query from same tag
- How to solve Webpack 2 and Karma MemoryFileSystem error?
- Even after adding key prop console returns list should have unique key prop
- How to update cart quantity if item already exist in Cart - reactjs?
- How to build a production version of React without minification?
- How get notifications from stack overflow for new questions?
- How can I unit test body of a method in my componentDidMount() in React?
- Regular expression for "+" not working in Mozilla
- Meteor and React: Correct way to render according to login state
- Firebase v9 React JS IndexOf is not a function
- Iterating through items and assign each item the material-ui grow component
- Requests between ReactJS Axios and Go API
- How to deal with nested useEffect?
- Antd RangePicker Component with React Hook Form
- Trying to sort my challenges alphabetically based on title/description with buttons
- Summernote rich text editor-restrict image above particular height and width
- Adding a 'count clicks' function to a boolean button in React
- How Change Background Color & Blur mui5 modal?
- How to check if component has proper value in props from mapStateToProps
- When the login button is clicked, the url is changed, but it does not go to the login page
- React-dnd - change styling of dropTargets on dragStart
- Does React not work with js Set:s (the datatype)?
- React Testing Library custom render function and async await
- React Router shows dynamic route with old component/data before rerendering
- onClick inside of a <img
- Use lodash groupBy function to categorize objects in an array
- Updating state variable without changing the value of other states assigned to them on render
- Testing Modal props with enzyme and jest
- Uncaught Error: useNavigate() may be used only in the context of a <Router> component
- React hookrouter multiple layouts
- Electron.js and webpack with Creact-react-app