I'm trying to do simple calculations with a new value in an updated state. I'm simply trying to divide a users input, with another number. I am a total beginner, so forgive me for the rooky question! Here's my code which isn't working for me. There are no errors, it's just not showing the resulting figure from the calculation -
import { useState } from "react";
const Counter = () => {
const [area, setArea] = useState("");
const newArea = () => {
setArea(area.target.value);
};
const deckBoards = (newArea) => {
(newArea / 0.145).toFixed(2);
};
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 : {deckBoards} lineal metres
</div>
You are missing event in the newArea function and DeckBoards needs to be area in JSx
Try this
import { useState } from "react";
const Counter = () => {
const [area, setArea] = useState("");
const deckBoards = (newArea) => {
// it was missing return statement
return (newArea / 0.145).toFixed(2);
};
const newArea = (e) => {
const value = e.target.value;
// Calculate here
const calculated = deckBoards(value);
// Update value
setArea(calculated);
};
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
</div>
);
}