Linter should throw when doing assignment operation on state or props
See original GitHub issueI followed this tutorial, pasted the code into create-react-app and I got error of
Uncaught TypeError: Cannot assign to read only property ‘selected’ of object ‘#<Object>’
when I click and fired the select function, which is in line 77 of the demo: view-source:view-source:http://chrisharrington.github.io/demos/react-controls/calendar.html
select: function(day) {
this.props.selected = day.date; //error
this.forceUpdate();
},
I wonder why the http://chrisharrington.github.io/demos/react-controls/calendar.html did by the author worked well.
Created a demo repo as well https://github.com/eldyvoon/read-only-property-react-error
Issue Analytics
- State:
- Created 7 years ago
- Comments:9 (8 by maintainers)
Top Results From Across the Web
expected assignment or function call: no-unused-expressions ...
I was using the parenthesis with the return statement on the same line at which i had written the rest of the code....
Read more >You're overusing useMemo: Rethinking Hooks memoization
In some cases, useMemo is irrelevant, overused, and harmful to your application performance. Learn these situations and how to avoid them.
Read more >React with TypeScript Cheatsheet - Bits and Pieces
TypeScript will throw a static error when the value of priority or score prop above doesn't match any of the literal values. Next,...
Read more >How To Use and Not Use State - React Training
From React's perspective, they don't know if you're conditionalizing a call to useState , so the built-in linter will check to see if...
Read more >no-unused-vars - ESLint - Pluggable JavaScript Linter
The line comment // exported variableName will not work as exported is not line-specific. Examples of correct code for /* exported variableName */...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
We already have
no-direct-mutation-state
rule enabled in eslint-config-react-app (https://github.com/facebookincubator/create-react-app/blob/master/packages/eslint-config-react-app/index.js#L226) and it appears to be working as expected.I created an issue over at https://github.com/yannickcr/eslint-plugin-react/issues/1113 for linting props mutation, and I’d be happy to incorporate it into
eslint-config-react-app
if it gets approved.Closing as stale.