I'm trying to use a user inputted number for multiple calculations in a component. I am able to use the input for the first calculation (deckboards) but not for the others. For example, newArea / 0.145 is output. But the next calculation for joists (newArea / 0.45) is not output, and neither are the following calculations. Any help would be much appreciated!
import { useState } from "react";
import AddPercent from "./AddPercent";
const Counter = () => {
const [area, setArea] = useState("");
const newArea = (e) => {
const value = e.target.value;
const deckCalc = deckBoards(value);
setArea(deckCalc);
};
const deckBoards = (newArea) => {
return (newArea / 0.145).toFixed(2);
};
const joists = (newArea) => {
return (newArea / 0.45 + 1).toFixed(2);
};
const sixMJoists = (joists) => {
return (joists / 6).toFixed(2);
};
const fourMJoists = (joists) => {
return (joists / 4.8).toFixed(2);
};
const screws = (joists) => {
return (joists * 13.2).toFixed(0);
};
return (
<div label="Deck">
<h2>Total area of deck</h2>
Area
<input
placeholder="Enter area here"
type="text"
onChange={newArea}
type="number"
/>
<br />
<h2>Deck boards</h2>Deck boards at 140mm wide : {area} lineal metres
<AddPercent />
<br />
<h2>Joists</h2>Joists based on 450mm spacing : {joists} lineal metres
<p>Which is equal to this many 6m lengths : {sixMJoists}</p>
<p>or</p>
<p>This many 4.8m lengths : {fourMJoists}</p>
<AddPercent />
<br />
<h2>Screws</h2>Number of screws needed : {screws}
<AddPercent />
</div>
);
};
<h2>Joists</h2>Joists based on 450mm spacing : {joists} lineal metres
.
Here joists is a function name , you should create a new state for each variable , for example joists , sixMJoists , as you have created for area . Or you can use like this .
import "./styles.css";
import { useState } from "react";
// import AddPercent from "./AddPercent";
const Counter = () => {
const [area, setArea] = useState("");
const newArea = (e) => {
const value = e.target.value;
const deckCalc = deckBoards(value);
setArea(deckCalc);
};
const deckBoards = (newArea) => {
return (newArea / 0.145).toFixed(2);
};
const joists = (newArea) => {
return (newArea / 0.45 + 1).toFixed(2);
};
const sixMJoists = (joists) => {
return (joists / 6).toFixed(2);
};
const fourMJoists = (joists) => {
return (joists / 4.8).toFixed(2);
};
const screws = (joists) => {
return (joists * 13.2).toFixed(0);
};
return (
<div label="Deck">
<h2>Total area of deck</h2>
Area
<input
placeholder="Enter area here"
type="text"
onChange={newArea}
type="number"
/>
<br />
<h2>Deck boards</h2>Deck boards at 140mm wide : {area} lineal metres
{/* <AddPercent /> */}
<br />
<h2>Joists</h2>Joists based on 450mm spacing : {joists(area)} lineal metres
<p>Which is equal to this many 6m lengths : {sixMJoists(joists(area))}</p>
<p>or</p>
<p>This many 4.8m lengths : {fourMJoists(joists(area))}</p>
{/* <AddPercent /> */}
<br />
<h2>Screws</h2>Number of screws needed : {screws(joists(area))}
{/* <AddPercent /> */}
</div>
);
};
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Counter />
</div>
);
}I hope this solves your issue and you understand your mistake in the code .
Refer this sandbox code Link