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=".1.0/react.js"></script>
<script src=".1.0/react-dom.js"></script>
<div id="app"></div>

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./ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

• javascript
• reactjs
• data-binding

• yes @VaibhavVishal -- pls do that! – Deadpool Commented Jan 8, 2019 at 6:48

2 Answers 2

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./ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

<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 ponentDidUpdate method to update final value when initial value changes, as shown below:

See ments 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);
    }
    ponentDidUpdate(props, state){  // runs everytime after ponent updates, the arguments props and state are previous props and state before update.
        // this check is important, you are doing set state inside ponentDidUpdate it must be inside some condition
        // otherwise you will be stuck in infinite loop as ponent 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 ponentDidUpdate
                <span>{this.state.initialValue * 10}</span> %}
            </div>
        );
    }  
}