Linter should throw when doing assignment operation on state or props

[eldyvoon]

I 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 '#'

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

[viankakrisna]

You cannot assign to props in react. here's useful docs on that topic https://facebook.github.io/react/docs/components-and-props.html#props-are-read-only and https://facebook.github.io/react/docs/state-and-lifecycle.html
Judging from

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>

It is using an old version of react. I don't know when this api changes or why the author use it that way. I suggest you to try to find a more recent components.

[eldyvoon]

@viankakrisna I changed it to state instead of altering the props, now it's working. Thanks!

[viankakrisna]

@eldyvoon don't forget to use setState!

[Timer]

I feel like this is something we can catch in our linter. Can it be done?

[Timer]

And if not in the linter, can we capture and make the error friendlier with a gentle nudge to use setState or a callback to parent component?

[viankakrisna]

maybe we can turn on this https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-direct-mutation-state.md
AFAIK no rules for preventing props mutation

[Timer]

That rule should be easily adaptable to extend to props.

[ianschmitz]

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 jsx-eslint/eslint-plugin-react#1113 for linting props mutation, and I'd be happy to incorporate it into eslint-config-react-app if it gets approved.