Calculating price returning NaN in React

April 22, 2022

I am trying to make a basic shop app using React. I am also a beginner in React. The problem is that when I am trying to make the price calculator, it is returning NaN(Not a number). I don’t know why this is happening, can anyone please help me?

My code:

import React from "react";
import Modal from "./Modal";
import "./login.css";
class App extends React.Component {
  state = {
    show: false,
    name: "",
    password: "",
    burger_quantity: 0,
    burger_price: 0,
  };
  showModal = (e) => {
    this.setState({
      show: !this.state.show,
    });
  };

  function1 = (event) => {
    this.setState({ name: event.target.value });
  };

  function2 = (event) => {
    this.setState({ password: event.target.value });
  };

  changeBurgerQuantity = (event) => {
    this.setState({ burger_quantity: event.target.value });
    const price = this.state.burger_quantity * this.state.burgerPrice;
    this.setState({ burger_price: price });
  };

  removeBurger = () => {
    this.setState({ burger_quantity: "0" });
  };

  burgerPrice = () => {
    const price = this.state.burger_quantity * this.state.burgerPrice;
    this.setState({ burger_price: price });
  };

  render() {
    return (
      <div>
        <div>
          <ul>
            <li>
              <p id="logo"> Mart</p>
            </li>
            <li>
              <a class="active">Home</a>
            </li>
            <li>
              <a onClick={this.function1}>Page 1</a>
            </li>
            <li>
              <a>Page 2</a>
            </li>
            <li>
              <a>Page 3</a>
            </li>
            <li>
              <a id="loggedinas">Logged in as: {this.state.name}</a>
            </li>
          </ul>
        </div>

        <center>
          <img src={logo} width="200" height="200" />
          <hr />
        </center>

        <br />
        <center>
          <div className="App">
            <button
              class="toggle-button"
              onClick={(e) => {
                this.showModal(e);
              }}
            >
              show Modal
            </button>

            <Modal onClose={this.showModal} show={this.state.show}>
              <h3>Login/Sign Up</h3>
              <input
                type="email"
                onChange={this.function1}
                maxLength="25"
              ></input>
              <br />
              <br />
              <input type="password" onChange={this.function2}></input>
            </Modal>
          </div>
        </center>

        <div class="container">
          <div class="column-item">
            <center>
              <img
                id="divimage"
                src="https://th.bing.com/th/id/R.163601bbba8775ef10230788abab7cd2?rik=WgyxMm8zfIKRBw&riu=http%3a%2f%2fwallpapersdsc.net%2fwp-content%2fuploads%2f2016%2f09%2fBurger-HD-Desktop.jpg&ehk=FEYSmbcw7WsmOsPpXFCwdBSZKqW1wZMiWJoxFuOlzQc%3d&risl=1&pid=ImgRaw&r=0"
              ></img>
              <hr></hr>
              <p id="itemheading">THE BURGER</p>
            </center>
          </div>
          <div class="column-item">
            <center>
              <img
                id="divimage"
                src="https://th.bing.com/th/id/R.163601bbba8775ef10230788abab7cd2?rik=WgyxMm8zfIKRBw&riu=http%3a%2f%2fwallpapersdsc.net%2fwp-content%2fuploads%2f2016%2f09%2fBurger-HD-Desktop.jpg&ehk=FEYSmbcw7WsmOsPpXFCwdBSZKqW1wZMiWJoxFuOlzQc%3d&risl=1&pid=ImgRaw&r=0"
              ></img>
              <hr></hr>
              <p id="itemheading">THE BURGER</p>
              <p id="itemdescription">Chicken burger. $5</p>
              <button onClick={this.removeBurger}>Remove from Cart</button>
              <input
                type="number"
                onChange={this.changeBurgerQuantity}
                id="itemQuantity"
              ></input>
              <p>Quantity: {this.state.burger_quantity}</p>
              <p>Price: {this.state.burger_price}</p>
            </center>
          </div>
          <div class="column-item">
            <center>
              <img
                id="divimage"
                src="https://th.bing.com/th/id/R.163601bbba8775ef10230788abab7cd2?rik=WgyxMm8zfIKRBw&riu=http%3a%2f%2fwallpapersdsc.net%2fwp-content%2fuploads%2f2016%2f09%2fBurger-HD-Desktop.jpg&ehk=FEYSmbcw7WsmOsPpXFCwdBSZKqW1wZMiWJoxFuOlzQc%3d&risl=1&pid=ImgRaw&r=0"
              ></img>
              <hr></hr>
              <p id="itemheading">THE BURGER</p>
            </center>
          </div>
        </div>

        <h1>{this.state.burger_quantity}</h1>
      </div>
    );
  }
}

export default App;

CSS:

html,
body {
  height: 100%;
}

.modal {
  width: 500px;
  background: white;
  border: 1px solid #ccc;
  transition: 1.1s ease-out;
  box-shadow: -2rem 2rem 2rem rgba(0, 0, 0, 0.2);
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}
.modal.off {
  opacity: 0;
  visibility: hidden;
  filter: blur(8px);
  transform: scale(0.33);
  box-shadow: 1rem 0 0 rgba(0, 0, 0, 0.2);
}
@supports (offset-rotation: 0deg) {
  offset-rotation: 0deg;
  offset-path: path("M 250,100 S -300,500 -700,-200");
  .modal.off {
    offset-distance: 100%;
  }
}
@media (prefers-reduced-motion) {
  .modal {
    offset-path: none;
  }
}
.modal h2 {
  border-bottom: 1px solid #ccc;
  padding: 1rem;
  margin: 0;
}
.modal .content {
  padding: 1rem;
}
.modal .actions {
  border-top: 1px solid #ccc;
  background: #eee;
  padding: 0.5rem 1rem;
}
.modal .actions button {
  border: 0;
  background: #78f89f;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  line-height: 1;
}

button {
  margin: 10px;
  border-radius: 15px;
  font-size: small;
  width: 100px;
  height: 45px;
  border-color: rgb(0, 158, 250);
  background-color: #00c5ff;
  color: white;
}

button:hover {
  background-color: crimson;
}

/* Navbar */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

#logo {
  color: white;
  padding-left: 10px;
  font-weight: bold;
}

#loggedinas {
  color: white;
  font-style: italic;
  font-weight: bold;
}

/* Navbar end */

hr {
  opacity: 0.2;
  margin-left: 200px;
  margin-right: 200px;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column-item {
  flex: 1 0 61%; /* flex-grow, flex-shrink, flex-basis */
  flex-basis: 33%;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

#divimage {
  height: 210px;
  width: 250px;
  padding: 20px;
  border-radius: 250px;
}

#itemheading {
  color: goldenrod;
  font-weight: bold;
  font-size: medium;
}

#itemdescription {
  color: lightseagreen;
  font-style: italic;
  padding: 25px;
}

#itemQuantity {
  height: 25px;
  width: 200px;
}

I know that the code is a bit messy, but I am a beginner in React.

Thank you in advance.

>Solution :

This is because you are using wrong state on below line-

changeBurgerQuantity = (event) => {
    this.setState({ burger_quantity: event.target.value });
    const price = this.state.burger_quantity * this.state.burgerPrice;
    this.setState({ burger_price: price });
  };

It should be –

changeBurgerQuantity = (event) => {
    this.setState({ burger_quantity: event.target.value });
    const price = this.state.burger_quantity * this.state.burger_price;
    this.setState({ burger_price: price });
  };

state name is burger_price and you are using burgerPrice, due to this burgerPrice is undefined and it return NaN.

check here Codesandbox