props cannot change inside Component?

[howtomakeaturn]

I have one question on this table:

-	props	state
Can get initial value from parent Component?	Yes	Yes
Can be changed by parent Component?	Yes	No
Can set default values inside Component?*	Yes	Yes
Can change inside Component?	No	Yes
Can set initial value for child Components?	Yes	Yes
Can change in child Components?	Yes	No

We can use 'setProps' in component. So I think props are able to change inside Component?

Thanks for any feedback!

[ovidiuch]

You can, technically, but it's a bad practice. It will even throw a React warning.

These are guidelines we created to have a more maintainable code, not technical specs.

[prestifidibs]

Also, "Can change inside Component? No" and "Can change in child Components? Yes" seem paradoxical. Am I missing something?

[ovidiuch]

I think the correct phrasing would've been "Can change for child Components?"

[meligatt]

I have a question, in every react js tutorial/documentation it says that Props can't change, which I kinda understand, so, this means that the Value of a prop is the thing that can't change, right?, or it refers to the idea of adding more {key,value} to the 'props js plain object? maybe that is the thing that cannot change? i'm a little bit confused sometimes... I hope I could explain myself. thanks, cheers.

[meligatt]

someone was confused about the table too: here the question and answer in stackoveroflow: http://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react

[NiGhTTraX]

@meligatt the this.props object can't change from within the component that uses it. The props of a component are the source of truth coming from another component. The child component shouldn't ever change that truth.

Since the props of one component can be another component's state, that can change freely.

Think of components in terms of functions:

var X = {y: 21};

function foobar(props) {
  props.y = 42;
}

Calling foobar(X) would mutate the object X which is really bad for the other services that use X.

You can call foobar with different objects or different values for the keys at any point in time, but you should have the guarantee that what you're passing in will never change inside foobar. Hence, your components should use callbacks to signal the wish of updating the props. The parent components should listen to these callbacks and take the necessary actions.

[maxkuzmin]

Hello, I have a question about "Can get initial value from parent Component?" and "Can set initial value for child Components?". Props can be set by parent component, yes, but why state is marked as "Yes"? How can parent component set state of child component?

getInitialState: function() {
   return {foo: this.props.foo}
}

This code sets initial state based on props passed by parent component, but I would not say that in this code "initial state value is set by parent component."

[nighthunter3173]

Hello ! The react documentation explains that props are read only. On the other hand after experimentation, the method that I use and that seems to me adapted is to implement a method in the component parent, this method will be responsible for modifying its state, then to pass this method to the component child. By calling this method in the child component, the state of the parent component will be changed. So the only source of truth remains the parent component. I hope this can help some!

[papaponmx]

I ran into some similar issue. You might want to look into React.cloneElement(). Here is the link to docs for reference: https://reactjs.org/docs/react-api.html#cloneelement

[emayom]

While this issue is quite old 😅, I wanted to provide a reference as some individuals might still have misconceptions. According to the React post(October 17, 2015), the setProps has been deprecated.

React v0.14 - "setProps and replaceProps are now deprecated."