CODEWITHSUNDEEP
javascripthtmlreactjs
sourav sahu
sourav sahu

Reputation: 23

Addition of two numbers in reactjs

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.

Upvotes: 1

Views: 24469

Answers (3)

freedev111
freedev111

Reputation: 132

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'));

Upvotes: 1

Md Sabbir Alam
Md Sabbir Alam

Reputation: 5054

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.

Upvotes: 3

Salman Mehmood
Salman Mehmood

Reputation: 283

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

Upvotes: 1

Related Questions