Cannot assign to read only property 'props' of #

Question

I checked #1654 with no success. Please have a look at the issue in more detail here-

Basically what I am doing is using a Navigator to move from index page to ApplistGridView page. I see the navigation is successful(from logs) but, even before I see the screen I face this issue.

And chrome debug messages-

Code is posted at Github Haven't found a solution. What am I doing wrong?

score 29 · Accepted Answer · edited Nov 29 '17 at 14:06

29

You cannot push to props this.props.nav.push({id: 'Applist', index: 2}); since component properties are read-only, as the error states. Props can only be derived from a parent component, but cannot be modified.

EDIT: This article is a great starting point for people confused in this matter as I was a while ago:) https://reactjs.org/docs/thinking-in-react.html

edited Nov 29 '17 at 14:06

Sachem

481
1
4
13

answered Nov 25 '15 at 23:22

Thomas

5,110
1
16
17

Can you please tell me more about what "read-only" component means? I didn't make any component read-only by virtue as per my knowledge. – bozzmob Nov 26 '15 at 04:44
1

@bozzmob This is by default how React handles properties (props) that are passed by a parent component. Instead of using props, you can make use of states. If you want to share an object/array or such across and app, instead of passing a state to other components you can make use of Flux or Redux to share a store across your app. Read more here: http://stackoverflow.com/questions/24939623/can-i-update-a-components-props-in-react-js – Thomas Nov 26 '15 at 19:31
@Thomas - I am also facing a similar problem but the uniqueness is that the application is working fine but when I run the test (Which I have written using jest) I am getting this error could you please help me in getting a better understanding of it – Pragam Shrivastava Feb 20 '18 at 12:09

score 7 · Answer 2 · answered May 07 '19 at 10:43

7

If this is happening to you not because of props but because of state, you may be trying to do an assignment like this:

this.state.nav = 'whatever';

Remember that assignments to state in React should be like:

this.setState({
  nav: 'whatever'
});

answered May 07 '19 at 10:43

CPHPython

12,379
5
59
71

score 2 · Answer 3 · edited Mar 24 '20 at 21:28

2

You write this.props.nav.push({id: 'Applist', index: 2});

But this.props is read-only; you cannot modify it.

If you want to pass some value to the parent react component, then you can use this.prop.onSomeEvent(value) in a child component. Then handle the push process in the parent component.

edited Mar 24 '20 at 21:28

Cindy Meister

25,071
21
34
43

answered Mar 24 '20 at 20:59

Ihsan

71
1
6

score -4 · Answer 4 · answered Nov 22 '20 at 07:49

-4

In file node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js change ts.JsxEmit.ReactJsx to ts.JsxEmit.ReactJSX

answered Nov 22 '20 at 07:49

Leonid M

36
3

Never change anything in node_modules files... – BonisTech Oct 23 '21 at 19:58

4 Answers4