Problems with handling state and props in React JS

Question

Problems with handling state and props in React JS

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Hi, I'm venturing into React Js and I'm looking at how props and state behave. I'm passing some props through the ReactDom and I try to manage them and I see that they do not change their initial state. Now I'm working with the states and I see if they change. Well first I want to clarify how this actually works in React. My second question is because in my code I am trying to increase the value of a state and only the subtraction works correctly when the two functions are declared in the same way? Below I put the example code so that they look at the behavior of the function _handleIncreaseButton ().

<style>
h2{
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  color: #fff;
  background-color: #0288D1;
  margin-bottom: 0px;
  padding: 10px;

}
button{
  margin: 0 10px 0 10px;
}
#text-style,#text-size { 
    display: block;
    margin: 10px 0 10px 0;
  }
 #list{
  border: 1px solid #0288D1;
  background-color: #fff;
  margin-top: 0px;
  padding: 10px
 }
 #menu{
  display:inline-block;
 }
</style>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script> 
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
<script src="FontChooser.js" type="text/jsx"></script>

<div id='container'></div>

<script type="text/jsx">

ReactDOM.render(
   <div>
    <FontChooser min='4' max='40' size='16' text='Fun with React !' bold='false'/>
   </div>,
document.getElementById('container')
);

</script>

/ ------ React Code ------ /

class FontChooser extends React.Component {

constructor(props) {
super(props);
this.state = {
    size: this.props.size,
    textStyle: this.props.Bold,
    min: this.props.min,
    max: this.props.max
 };
}
_handleDecreaseButton(){ 
    this.setState({size: this.state.size - 1});
}
_handleIncreaseButton(){ 
    this.setState({size: this.state.size + 1});
}



render() {

return(
    <div id="bloque">
        <div id="menu" >
               <h2 >Text Edit</h2>
               <div id="list" >
                   <div id="text-style">
                       <label id="checkbox-label">Transform to Bold: </label>
                       <input type="checkbox" id="boldCheckbox" />
                   </div>
                   <div id="text-size">
                       <label id="checkbox-label-size">Font Size: </label>
                       <button id="decreaseButton" onClick={ this._handleDecreaseButton.bind(this)}>-</button>
                       <span id="fontSizeSpan" >{this.props.size}</span>
                       <button id="increaseButton" onClick={ this._handleIncreaseButton.bind(this)}>+</button>
                   </div>
                </div>
        </div>
        <div>
            <span id="textSpan">{this.props.text}</span>
            <span id="textSpan">{this.state.size}</span>
        </div>
     </div>  
);
}
}

javascript reactjs

asked by user3821102 27.02.2018 в 17:13

source

2 answers

1

It should be noted that the way in which you update in state is not the best, you must be careful because state and props can be updated asynchronously and can show wrong values.

The best way to update a state that is dependent on the previous value, such as the sample samples, is to send a function instead of an object to the setState method. This function defines you as parameters the previous state and the props, for this case only the previous state.

this.setState((prevState) => ({
  counter: prevState.counter + 1
}));

I recommend that you see the documentation

answered by 05.03.2018 в 07:06

Shoot event by clicking on a cell in a GridView Object of class stdClass could not be converted to string

score 1 · Accepted Answer

You have to make sure that the size is a int to be able to add it using parseInt() , otherwise you would concatenate it as a string , and for this reason it worked with the " - " but not with the " + "

_handleDecreaseButton(){ 
    this.setState({size: parseInt(this.state.size) - 1});
}
_handleIncreaseButton(){ 
    this.setState({size: parseInt(this.state.size) + 1});
}

Regarding the props and state , the props are the properties with which a component is initialized, and these are fixed during the life cycle of this, instead the state s are which we use when the value is going to be updated or changed.