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 27 · Accepted Answer · edited Nov 29 '17 at 14:06

27

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

461
1
4
12

answered Nov 25 '15 at 23:22

Thomas

4,210
1
14
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 6 · Answer 2 · answered May 07 '19 at 10:43

6

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

9,522
4
50
66

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

1

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

24,375
21
34
43

answered Mar 24 '20 at 20:59

Ihsan

31
6

score 0 · Answer 4 · answered Jan 08 '21 at 17:04

0

Just One thing:

npm install typescript@4.0.5

Restart the server

answered Jan 08 '21 at 17:04

raoakif

17
2

1

Shouldn't this be a comment? – 700 Software Feb 02 '21 at 20:39

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

-1

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

42
3

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

5 Answers5