React Quadratic Calculator

Question

I'm new to React and I am trying to build a simple quadratic calculator web app. There are three inputs for each variable, a, b, and c. No matter what numbers I put in the values returned are always NaN. Help would be much appreciated. Code:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      a: null,
      b: null,
      c: null
    };

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

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

  publish(a, b, c) {
    document.write((-1 * b + Math.sqrt(Math.pow(b, 2) - (4 * a * c))) / 
(2 * a) + "<br/>" +
    (-1 * b - Math.sqrt(Math.pow(b, 2) - (4 * a * c))) / (2 * a));
  }

 render() {
 return( 
<div>
  <input
  type="number"
  name="Var A"
  placeholder="Enter Variable A"
  value={ this.state.a }
  onChange={ this.handleChange }/>

  <input
  type="number"
  name="Var B"
  placeholder="Enter Variable B"
  value={ this.state.b }
  onChange={ this.handleChange }/>

  <input
  type="number"
  name="Var C"
  placeholder="Enter Variable C"
  value={ this.state.c }
  onChange={ this.handleChange }/>

  <button value="Send" onClick={ this.publish }>Publish</button>
</div>
  }
}


export default App;

I suggest that you learn how to use the Chrome Developer tools. Be sure to install the React Dev Tools plugin. Then read https://ericlippert.com/2014/03/05/how-to-debug-small-programs/ for some tips to debug your program. — Code-Apprentice, Apr 30 '18 at 03:39
Console.log() is your friend. :D It sounds like you might have some strings where you expect there to be numbers... — TJBlackman, Apr 30 '18 at 03:40
I suggest that you print the values of `a`, `b` and `c` in your `publish()` function. I think you will see that they are all `undefined`. — Code-Apprentice, Apr 30 '18 at 03:41
Note: You can do `-b` instead of `-1*b` to get the same result. — Code-Apprentice, Apr 30 '18 at 03:42

score 0 · Answer 1 · answered Apr 30 '18 at 03:45

In the publish function you are using a,b and c which are passed as arguments, but what you actually want to use is the a,b and c from the state. Remove the argument from publish To look like : ```

  publish(){
             var a = this.state.a;
             var b = this.state.b;
             var c = this.state.c;

            ...


   }

``` Also the name of the inputs should be a, b and c and not Var A, Var B and Var C

This should fix you problem

score 0 · Answer 2 · answered Apr 30 '18 at 03:46

You are setting the variable in state, but calling function with undefined parameters.

Try this:

publish() {
    var a = this.state.a, b=this.state.b, c=this.state.c;
    a = parseInt(a); b=parseInt(b); c = parseInt(c);
    document.write((-1 * b + Math.sqrt(Math.pow(b, 2) - (4 * a * c))) / (2 * a) + "<br/>" + (-1 * b - Math.sqrt(Math.pow(b, 2) - (4 * a * c))) / (2* a));
  }

score 0 · Answer 3 · answered Apr 30 '18 at 03:46

The problem is that target.name in handleChange is not providing the expected value. The name assigned to your input is Var a.

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

<input type="number" name="Var A" placeholder="Enter Variable A" value={ this.state.a } onChange={ this.handleChange }/>

score 0 · Answer 4 · answered Apr 30 '18 at 06:06

You need to save the values of each input values properly, this can be done by using setState, but you have to properly set its name and value that will match to the states:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      a: "",
      b: "",
      c: ""
    };

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

  handleChange(e) {
 console.log('change');
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  publish() {

   let a = parseFloat (this.state.a), b=parseFloat (this.state.b), c = parseFloat (this.state.c);
  let discriminant = (Math.pow(b, 2) - (4 * a * c));
  if(discriminant > 0){
  const root1 = (-b + Math.sqrt(discriminant)) / (2 * a);
    const root2 = (-b - Math.sqrt(discriminant)) / (2 * a);
  document.write(root1+ "<br/>" +root2);
  }else{
   document.write('Discriminant is less than 0');
  }
 
   
  }

 render() {
 return( 
<div>
  <input
  type="number"
  name="a"
  placeholder="Enter Variable A"
  value={ this.state.a }
  onChange ={ this.handleChange }/>

  <input
  type="number"
  name="b"
  placeholder="Enter Variable B"
  value={ this.state.b }
  onChange ={ this.handleChange }/>

  <input
  type="number"
  name="c"
  placeholder="Enter Variable C"
  value={ this.state.c }
  onChange ={ this.handleChange }/>

  <button value="Send" onClick={ this.publish }>Publish</button>
</div>)
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

<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 id="app"></div>

Also, if the discriminant is less than 0, it will output NaN.

React Quadratic Calculator

4 Answers4