The difference between these is not clear to me, I only know that the state is the one that can mutate and props are the properties of the state? Could you help me with an example or something similar, thanks!
The difference between these is not clear to me, I only know that the state is the one that can mutate and props are the properties of the state? Could you help me with an example or something similar, thanks!
I see that the props are not states, they are components that are used in the application According to the official documentation it says this: [Props
The properties of a component can be defined as the configuration attributes for that component. They are received from a higher level (usually when the component is instantiated) and by definition are immutable, that is, a component cannot change its own props.
There are several ways to pass props to a component.
// Regular way ;
// Spread attributes let props = {}; props.foo = x; props.baz = y; ;
// Combined way ;
State
We could define it as a representation of the component at a point in time, a snapshot of the component. The state of a component will start with a default value but this value will be able to mutate during the life of the component.
We don't have to define states for a component, they are optional, and unlike props, a component can manage its own state. But we must be careful when using states since their use, citing the docu itself, increases complexity and reduces predictability. Avoid having too many stateful components, especially for large applications.
The usual way to inform a React component that its data has changed is by calling the setState() method. This method receives a plain JavaScript object, merges the new data into the state, and will re-render the component. When the render finishes a callback will be executed if one has been specified.
this.setState( { key: 'value' } );
Another method related to the state of components is replaceState. Not much to say about it, just that it is similar to setState but it will remove any pre-existing key that is not defined in the new state.
Note: This method is not available in the ES6 class syntax and may be removed in future versions of React.] 1
We can use props to access properties but you cannot change their value=state
Note: I use Babel
PROPS example:
state example
Conclusion states can change!! if you use props and you want a button to change color every time you click it, you couldn't with state you can make the button's state change every time it is clicked.