CODEWITHSUNDEEP
javascriptreactjsdata-binding
Deadpool
Deadpool

Reputation: 8240

Multiplication of a number by 10 by automatically calculating in State - React JS

In this example I want user to increase or decrease the numbers in input box and the number multiplied by 10 should be seen in the span adjescant to input box. I am not able to fetch the result. Can someone help me out.

Snippet:

class App extends React.Component {
  state = {
    initialValue: 0,
    finalValue: initialValue* 10
  }
  render() {

    return (
    <div>
        <input type="number" value={this.state.initialValue} onChange={this.alpha} name="initialValue" id="initialValue"/>
        <span>{this.state.finalValue}</span>
    </div>
   )
  }
   alpha = (ev) => {
    this.setState({
            [ev.target.name]: ev.target.value
    });
   }

}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

Upvotes: 0

Views: 12304

Answers (2)

Vaibhav Vishal
Vaibhav Vishal

Reputation: 7108

<span>{this.state.initialValue * 10}</span> is the easiest solution.
Right now you are multiplying 10 in constructor. That code runs only once so finalValue doesn't gets updated on input change. If for some reason you need two variables for both initial and final value you can use componentDidUpdate method to update final value when initial value changes, as shown below:

See comments in code for explanation.

class Test extends React.Component {
    constructor(props){ // this code runs only once
        super(props);
        this.state = {  // set both initial value and final value to 0.
            initialValue: 0,
            finalValue: 0,
        };
        this.alpha = this.alpha.bind(this);
    }
    componentDidUpdate(props, state){  // runs everytime after component updates, the arguments props and state are previous props and state before update.
        // this check is important, you are doing set state inside componentDidUpdate it must be inside some condition
        // otherwise you will be stuck in infinite loop as component updates everytime state changes
        if(state.initialValue!==this.state.initialValue){  // if initial value was changed(by function alpha) change final value too.
            console.log('input changed');  // just to see it working correctly, remove it later
            this.setState({ finalValue: this.state.initialValue * 10 });  // set final value to initial value * 10
        }
    }

    alpha (ev){
        this.setState({ [ev.target.name]: ev.target.value });
    }    
    render() {

        return (
            <div>
                <input type="number" value={this.state.initialValue} onChange={this.alpha} name="initialValue" id="initialValue"/>
                <span>{this.state.finalValue}</span>
                {% or do this and skip componentDidUpdate
                <span>{this.state.initialValue * 10}</span> %}
            </div>
        );
    }  
}

Upvotes: 1

Ashish
Ashish

Reputation: 4330

In your code you are doing finalValue: initialValue* 10 inside object initialization which is incorrect because there is no variable initialValue .

Coming to your question. You want to display somrthing base on the value in your state. For this you don't actually need 2 keys in objects, because second one is always 10 times of one of the key.

So instead of storing it in state. I have directly multiplied with 10 in render. This is working because anytime you are changing value inside your input box, the form re renders and thus render is called again. And since before render your initialValue is updated, you are getting 10 times value in span.

class App extends React.Component {
  state = {
    initialValue: 0,
  }
  render() {

    return (
    <div>
        <input type="number" value={this.state.initialValue} onChange={this.alpha} name="initialValue" id="initialValue"/>
        <span>{this.state.initialValue * 10}</span>
    </div>
   )
  }
   alpha = (ev) => {
    this.setState({
            [ev.target.name]: ev.target.value
    });
   }

}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

Upvotes: 2

Related Questions