I am not clear about the difference between these, I only know that the state is the one that can change and props are the properties of the state? Could you help me with an example or something like that, thanks!
I am not clear about the difference between these, I only know that the state is the one that can change and props are the properties of the state? Could you help me with an example or something like that, thanks!
I see that the props are not states are components that are used in the application According to the official documentation 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 can not 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 change during the life of the component.
We do not have to define states for a component, they are optional, and unlike what happens with props, a component can manage its own state. But we must be cautious when using states since their use, citing the docu itself, increases complexity and reduces predictability. Avoid having too many components with states, especially when dealing with large applications.
“Try to keep as many of your components as possible stateless”
The usual way to inform a React component that its data has changed is through the call to the setState () method. This method receives a flat JavaScript object, combines the new data in the state and re-renders the component. When the render finalize, a callback will be executed if it has been specified.
this.setState ({key: 'value'});
Another method related to the state of the components is replaceState. Little to say about it, just that it is similar to setState but it will remove any preexisting key that is not defined in the new state.
Note: This method is not available in the class syntax of ES6 and can be removed in future versions of React.] 1
We can use props to access properties but you can not change their value = state
Note: I use Babel
PROPS example:
<body>
<script type="text/babel">
var Movie = React.createClass({
render: function () {
return(
<div>
<h1>{this.props.titulo}</h1>
<h1>{this.props.genero}</h1>
</div>
);
}
});
ReactDOM.render(<Movie titulo="Mi titulo" genero="Masculino" />, document.getElementById('app'));
<script>
</body>
example of states
<body>
<script type="text/babel">
var CheckBox = React.createClass({
//obtengo el estado del checkbok
getInitialState : function(){
return {checked: !this.state.checked}
},
handleChecked: function (){
//cambio el estado
this.setState({checked: !this.state.checked})
},
render: function () {
var mensajito;
// valido el estado del checkbox
if(this.state.checked){
mensajito = 'checado';
}else{
mensajito = 'no checado';
}
return(
<div>
/* aqui es donde cambio el estado del checkbox y le pongo por default checked */
<inpit type="checkbox" onchange={this.handleCheked} defaultCheked={state.cheked} />
<h1> el checkbox esta {mensajito} </h1>
</div>
);
}
});
ReactDOM.render(<CheckBox />, document.getElementById('app'));
<script>
</body>
Conclusion states can change !! if you use props and you want a button to change color every time you click on it you can not change the state of the button every time you click on it.