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 >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
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 >
<div >
<center>
<img
id="divimage"
src="https://th.bing.com/th/id/R.163601bbba8775ef10230788abab7cd2?rik=WgyxMm8zfIKRBw&riu=http://wallpapersdsc.net/wp-content/uploads/2016/09/Burger-HD-Desktop.jpg&ehk=FEYSmbcw7WsmOsPpXFCwdBSZKqW1wZMiWJoxFuOlzQc=&risl=1&pid=ImgRaw&r=0"
></img>
<hr></hr>
<p id="itemheading">THE BURGER</p>
</center>
</div>
<div >
<center>
<img
id="divimage"
src="https://th.bing.com/th/id/R.163601bbba8775ef10230788abab7cd2?rik=WgyxMm8zfIKRBw&riu=http://wallpapersdsc.net/wp-content/uploads/2016/09/Burger-HD-Desktop.jpg&ehk=FEYSmbcw7WsmOsPpXFCwdBSZKqW1wZMiWJoxFuOlzQc=&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 >
<center>
<img
id="divimage"
src="https://th.bing.com/th/id/R.163601bbba8775ef10230788abab7cd2?rik=WgyxMm8zfIKRBw&riu=http://wallpapersdsc.net/wp-content/uploads/2016/09/Burger-HD-Desktop.jpg&ehk=FEYSmbcw7WsmOsPpXFCwdBSZKqW1wZMiWJoxFuOlzQc=&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.
CodePudding user response：
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