mizech mizech - 2 months ago 17
Javascript Question

React: Why doesn't the state of my app become updated?

I have made this small App with React JS:



var TextBox = React.createClass({
notify: function() {
let item = this.refs.inputElement;

this.props.changeHandler(item.dataset.variable, item);
},
render: function() {
return (
<div className={ this.props.divClass }
ref={ this.props.ref }>
<input type="text"
placeholder={ this.props.placeholder}
ref="inputElement"
className={ this.props.textBoxClass }
disabled={ this.props.disabled }
onChange={ this.notify }
data-variable={ this.props.variable } />
</div>
);
}
});

var Button = React.createClass({
render: function() {
function notify(e) {
this.props.handler(e.target.dataset.operation);
}

return (
<div className={ this.props.classDiv }>
<a href='#' className={ this.props.classButton }
onClick={ notify.bind(this) }
data-operation={ this.props.operation }>
{ this.props.value }
</a>
</div>
);
}
});

var Calculator = React.createClass({
INIT_STATE: { a: 'Enter a number ! For example 248',
b: 'Enter a number ! For example 1632',
aClass: 'input-box',
bClass: 'input-box' },
operations: {
'add': function() {
return this.state.a + this.state.b;
},
'subtract': function() {
return this.state.a - this.state.b;
},
'multiply': function() {
return this.state.a * this.state.b;
},
'divide': function() {
return this.state.a / this.state.b;
}
},
getInitialState: function() {
return this.INIT_STATE;
},
updateNumbers: function(variable, reference) {
var val = parseFloat(reference.value);
var varClass = [variable + 'Class'];

if (typeof val === 'number' && !isNaN(val)) {
if (this.state[variable + 'Class'].indexOf('invalid-input') > -1) {
this.setState({
[varClass]: this.state[varClass].split(' ')[0]
})
}

this.setState({
[variable]: val
});
} else {
this.setState({
[varClass]: [varClass] + ' invalid-input'
});
}
},
triggerOperation: function(operation) {
var result = this.operations[operation].call(this);

this.refs.resultBox.refs.inputElement.value = result;
},
resetForm: function() {
this.setState(this.INIT_STATE);
this.forceUpdate();
console.log(this.state);
},
render: function() {
var that = this;

var navButtons = this.props.navButtons.map(function(button) {
return (
<div>
<Button value={ button.value } classDiv={ button.classDiv }
classButton={ button.classButton }
handler={ that.triggerOperation } operation={ button.operation }/>
</div>
);
});

return (
<div className="calculator">

<div className="row">
<h1>Simple calculator</h1>
</div>

<div className="row">
<TextBox divClass="large-6 columns"
placeholder={ this.state.a }
ref="a" textBoxClass={ this.state.aClass }
value={ this.state.a }
changeHandler={ this.updateNumbers }
variable="a"
/>
<TextBox divClass="large-6 columns"
placeholder={ this.state.b }
ref="b" textBoxClass={ this.state.bClass }
value={ this.state.b }
changeHandler={ this.updateNumbers }
variable="b"
/>
</div>

<div className="row">
{ navButtons }
</div>

<div className="row">
<TextBox divClass="large-9 columns"
placeholder="Result"
ref="resultBox" textBoxClass="input-box"
disabled="disabled" />
<Button value="Clear" classDiv="large-3 columns"
classButton="attention nav-button"
handler={ this.resetForm } />
</div>
</div>
);
}
});

var NAV_BUTTONS = [
{ classDiv: 'large-3 column',
value: '+ Add',
classButton: 'calculation-method nav-button',
operation: 'add'
},
{ classDiv: 'large-3 column',
value: '- Subtract',
classButton: 'calculation-method nav-button',
operation: 'subtract'
},
{ classDiv: 'large-3 column',
value: 'x Multiply',
classButton: 'calculation-method nav-button',
operation: 'multiply'
},
{ classDiv: 'large-3 column',
value: '/ Divide',
classButton: 'calculation-method nav-button',
operation: 'divide'
}
];

ReactDOM.render(<Calculator navButtons={ NAV_BUTTONS } />, document.getElementById('app'));

$primaryColor: rgba(245, 245, 245, 1.0);
$secondaryColor: rgba(150, 150, 150, 1.0);
$lightUp: 20%;
$buttonColor: rgba(51, 71, 255, 1.0);
$borderRadius: 6px;

@mixin addPseudoClasses($selector, $color) {
#{$selector}:visited, #{$selector}:hover {
color: white;
}

#{$selector}:hover {
background: linear-gradient(lighten($color, $lightUp), $color);
color: white;
}

#{$selector}:active {
opacity: 0.6;
}
}

body {
background: linear-gradient(lighten($secondaryColor, $lightUp), $secondaryColor);
}

.nav-button {
text-decoration: none;
color: white;
padding: 5px 20px;
background-color: powderBlue;
text-align: center;
font-weight: 900;
margin-bottom: 16px;
display: inline-block;
width: 100%;
border-radius: $borderRadius;
}

.calculation-method {
background: linear-gradient(lighten($buttonColor, $lightUp), $buttonColor);
}

@include addPseudoClasses('.calculation-method', orangered);

h1 {
text-align: center;
margin: 20px 0 30px;
}

.attention {
background: linear-gradient(darken(deepPink, 20%), lighten(deepPink, 20%));
text-transform: uppercase;
}

@include addPseudoClasses('.attention', red);

.invalid-input {
border-color: red !important;
background-color: pink !important;
}

<div class="wrap">
<div id="app"></div>
</div>





Working Live-Demo here: http://codepen.io/mizech/pen/VKvNKX

So far everything has gone smoothly. But now I want to implement the clear-form functionality and I get problems.

When the button "CLEAR" is clicked I (try) to set the state to the initial values using this.setState().

Let's say I have entered 5 into the first textbox and 4 into the second textbox. Then I click "Add" to calculate the sum.

Afterward I click "CLEAR" to reset the form. The method "resetForm" is executed.

I would the state expect to become :

[object Object]{a: 'Enter a number ! For example 248', aClass: "input-box", b: 'Enter a number ! For example 1632', bClass: "input-box"}

Instead it stays:

[object Object]{a: 5, aClass: "input-box", b: 4, bClass: "input-box"}

Insofar my "forceUpdate" afterward doesn't have an effect.

Using an object literal ( this.setState({ a: 'Enter number' }); ) doesn't work too:

If I change the state the elements which receive the state as props should change too. But they don't ...

What I'm I doing wrong here?
How can I reset the form to it's initial values?
Without doing a reload.

QoP QoP
Answer

TextBox component is receiving the prop value but you are not using it, that's the reason why it's not re-rendering.

Your Textbox component should be

var TextBox = React.createClass({
  notify: function() {
    let item = this.refs.inputElement;

    this.props.changeHandler(item.dataset.variable, item);
  },
  render: function() {   
    return (
      <div className={ this.props.divClass }
           ref={ this.props.ref }>
          <input type="text"
                 placeholder={ this.props.placeholder} 
                 ref="inputElement" 
                 className={ this.props.textBoxClass }
                 disabled={ this.props.disabled } 
                 onChange={ this.notify }
                 data-variable={ this.props.variable } 
                 value={this.props.value} // You were missing this
            />
      </div>
    );
  }
});

and your resetForm() method

resetForm: function() {
    this.setState(this.INIT_STATE, () => console.log(this.state));
},

fixed codepen

Snippet

var TextBox = React.createClass({
  notify: function() {
    let item = this.refs.inputElement;
    
    this.props.changeHandler(item.dataset.variable, item);
  },
  render: function() {   
    return (
      <div className={ this.props.divClass }
           ref={ this.props.ref }>
          <input type="text"
                 placeholder={ this.props.placeholder} 
                 ref="inputElement" 
                 className={ this.props.textBoxClass }
                 disabled={ this.props.disabled } 
                 onChange={ this.notify }
                 data-variable={ this.props.variable } 
                 value={this.props.value}
            />
      </div>
    );
  }
});

var Button = React.createClass({
  render: function() {
    function notify(e) {
      this.props.handler(e.target.dataset.operation);
    }
    
    return (
      <div className={ this.props.classDiv }>
        <a href='#' className={ this.props.classButton } 
                    onClick={ notify.bind(this) }
                    data-operation={ this.props.operation }>
          { this.props.value }
        </a>
      </div>
    );
  }
});

var Calculator = React.createClass({
  INIT_STATE: { a: 'Enter a number ! For example 248',
                b: 'Enter a number ! For example 1632',
                aClass: 'input-box',
                bClass: 'input-box' },
  operations: {
    'add': function() {
      return this.state.a + this.state.b;
    },
    'subtract': function() {
      return this.state.a - this.state.b;
    },
    'multiply': function() {
      return this.state.a * this.state.b;
    },
    'divide': function() {
      return this.state.a / this.state.b;
    }
  },
  getInitialState: function() {
    return this.INIT_STATE; 
  },
  updateNumbers: function(variable, reference) { 
    var val = parseFloat(reference.value);
    var varClass = [variable + 'Class'];
    
    if (typeof val === 'number' && !isNaN(val)) {
      if (this.state[variable + 'Class'].indexOf('invalid-input') > -1) {
        this.setState({
          [varClass]: this.state[varClass].split(' ')[0]
        })
      }
      
      this.setState({
        [variable]: val
      });
    } else {
      this.setState({
        [varClass]: [varClass] + ' invalid-input'
      });
    }
  },
  triggerOperation: function(operation) {
    var result = this.operations[operation].call(this);
    
    this.refs.resultBox.refs.inputElement.value = result;
  },
  resetForm: function() {
    this.setState(this.INIT_STATE);
  },
  render: function() {
    var that = this;
    
    var navButtons = this.props.navButtons.map(function(button) {
      return (
        <div>
          <Button value={ button.value } classDiv={ button.classDiv }
                  classButton={ button.classButton }
                  handler={ that.triggerOperation } operation={ button.operation }/>
        </div>
      );
    });
    
    return (
      <div className="calculator">
        
        <div className="row">
          <h1>Simple calculator</h1>
        </div>
        
        <div className="row">
          <TextBox divClass="large-6 columns"
                   placeholder={ this.state.a }
                   ref="a" textBoxClass={ this.state.aClass }
                   value={ this.state.a }
                   changeHandler={ this.updateNumbers }
                   variable="a"
                   value={this.state.a}
                   />
          <TextBox divClass="large-6 columns"
                   placeholder={ this.state.b }
                   ref="b" textBoxClass={ this.state.bClass }
                   value={ this.state.b }
                   changeHandler={ this.updateNumbers }
                   variable="b"
                   value={this.state.b}
                   />
        </div>
        
        <div className="row">
          { navButtons }
        </div>
        
        <div className="row">
          <TextBox divClass="large-9 columns"
                   placeholder="Result"
                   ref="resultBox" textBoxClass="input-box"
                   disabled="disabled" />
          <Button value="Clear" classDiv="large-3 columns"
                  classButton="attention nav-button"
                  handler={ this.resetForm } />
        </div>     
      </div>
    );
  }
});

var NAV_BUTTONS = [
  { classDiv: 'large-3 column',
    value: '+ Add',
    classButton: 'calculation-method nav-button',
    operation: 'add'
  },
  { classDiv: 'large-3 column',
    value: '- Subtract',
    classButton: 'calculation-method nav-button',
    operation: 'subtract'
  },
  { classDiv: 'large-3 column',
    value: 'x Multiply',
    classButton: 'calculation-method nav-button',
    operation: 'multiply'
  },
  { classDiv: 'large-3 column',
    value: '/ Divide',
    classButton: 'calculation-method nav-button',
    operation: 'divide'
  }
];

ReactDOM.render(<Calculator navButtons={ NAV_BUTTONS } />, document.getElementById('app'));
body {
  background: linear-gradient(#c9c9c9, #969696);
}

.nav-button {
  text-decoration: none;
  color: white;
  padding: 5px 20px;
  background-color: powderBlue;
  text-align: center;
  font-weight: 900;
  margin-bottom: 16px;
  display: inline-block;
  width: 100%;
  border-radius: 6px;
}

.calculation-method {
  background: linear-gradient(#99a3ff, #3347ff);
}

.calculation-method:visited, .calculation-method:hover {
  color: white;
}

.calculation-method:hover {
  background: linear-gradient(#ff8f66, orangered);
  color: white;
}

.calculation-method:active {
  opacity: 0.6;
}

h1 {
  text-align: center;
  margin: 20px 0 30px;
}

.attention {
  background: linear-gradient(#ad005d, #ff7ac2);
  text-transform: uppercase;
}

.attention:visited, .attention:hover {
  color: white;
}

.attention:hover {
  background: linear-gradient(#ff6666, red);
  color: white;
}

.attention:active {
  opacity: 0.6;
}

.invalid-input {
  border-color: red !important;
  background-color: pink !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div class="wrap">
  <div id="app"></div>
</div>

fixed codepen