Addition of two numbers in reactjs

Question

I have two input boxes to take user input as numbers and want to display their addtion as a result in span but they are not added they are appended.

          This is my reactjs that i have tried:

              class EssayForm extends React.Component {
                 constructor(props) {
               super(props);
                          this.state = {
                value:'',
                 fno:'',
               sno:'',
         };
            this.handleSquareChange = this.handleSquareChange.bind(this);

           this.handleTextChange = this.handleTextChange.bind(this);

         this.handleTextLastChange = this.handleTextLastChange.bind(this);

              this.handleSubmit = this.handleSubmit.bind(this);
              }

                handleSquareChange(event) {
                this.setState({value: event.target.value});
                  }

               handleTextChange(event) {
                this.setState({fno: event.target.value});
               }

            handleTextLastChange(event) {
            this.setState({sno: event.target.value});
                }

           handleSubmit(event) {
           event.preventDefault();
               alert("welcome");
           }

                      render() { 
              return (
               <div className="example">
                   <form onSubmit={this.handleSubmit}>
                   <span>Square of:</span>
                   <input type="text" value={this.state.value} onChange= 
             {this.handleSquareChange} />
                <span>First no:</span>
              <input type="text" value={this.state.fno} onChange= 
       {this.handleTextChange} />
         <span>second no:</span>
          <input type="text" value={this.state.sno} onChange= 
          {this.handleTextLastChange} />
      <input type="submit" value="Submit" onClick={this.handleSubmit} />
               </form>
            <div className="preview">
                <h1>Square of no is</h1>
              <div>{this.state.value * this.state.value}</div>
                </div>

             <div className="preview">
           <h1>Result of no is</h1>
            <div>{this.state.fno + this.state.sno}</div>
                      </div>
                </div>
              );
            }
       } 

           ReactDOM.render(<EssayForm />, document.getElementById('app'));

I have taken a input box to square a number it works fine but not addition.Anybody can let me know where i am wrong.I am new to reactjs.

Md Sabbir Alam · Accepted Answer · 2019-08-08 08:41:40Z

3

In your state you have defined sno and fno as string. Therefore when you set anything to them they make the value as string. What you can do is make sno and fno filed as number by giving them the default value of 0. Or, you can typecast them to number before adding. Like, (Number)this.state.fno + (Number)this.state.sno.

answered Aug 8, 2019 at 8:41

Md Sabbir Alam

5,0643 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Salman Mehmood · Accepted Answer · 2019-08-08 08:40:02Z

1

handleTextChange(event) {
      this.setState({fno: Number(event.target.value)});
}

handleTextLastChange(event) {
      this.setState({sno: Number(event.target.value)});
}

just replace the functions.Hope this will solve your problem

answered Aug 8, 2019 at 8:40

Salman Mehmood

2832 silver badges6 bronze badges

Comments

freedev111 · Accepted Answer · 2019-08-08 08:58:55Z

This is code for you;

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
        value:'',
        fno:'',
        sno:'',
      };

      this.handleChange = this.handleChange(this);
      this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;

    this.setState({ [name]: value });
  }

  handleSubmit(event) {
    event.preventDefault();
    alert("welcome");
  }

  render() { 
    const { fno, sno, value } = this.state;

    return (
      <div className="example">
        <form onSubmit={this.handleSubmit}>
          <span>Square of:</span>
          <input 
            type="text" 
            name="value"
            value={value} 
            onChange={this.handleChange} 
          />
          <span>First no:</span>
          <input 
            name="fno"
            type="text"
            value={fno}
            onChange={this.handleChange} 
          />
          <span>second no:</span>
          <input 
            type="text" 
            name="sno"
            value={sno} 
            onChange={this.handleChange}
          />
          <input type="submit" value="Submit" onClick={this.handleSubmit} />
        </form>
        <div className="preview">
          <h1>Square of no is</h1>
          <div>{Number(value) * Number(value)}</div>
        </div>
        <div className="preview">
          <h1>Result of no is</h1>
          <div>{Number(fno) + Number(sno)}</div>
        </div>
      </div>
    );
  }
} 

ReactDOM.render(<EssayForm />, document.getElementById('app'));

Collectives™ on Stack Overflow

Addition of two numbers in reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related