Im using React and trying to limit the amount of digits after a decimal from a user input. It is a TextField and has an onChange handler event to capture the input of the user. The onChange handler is called handleAmount . I am passing in the user input as e.target.value. I did some research behind this and think that a way to handle limiting the amount to only 5 decimal places is doing something along the lines of using the .toFixed(5) method. However, when I do this, I get an error
TypeError: value.toFixed is not a function
Do you guys see anything that is wrong with that? Please see my code below. Thanks!
const [amount, setAmount] = useState();
const handleAmount = (value) => {
setAmount(value.toFixed(5));
};
<TextField
className={classes.textField}
type="number"
onChange={e => handleAmount(e.target.value)}
value={amount}
error={isInvalidAmount}
helperText={invalidAmountMessage}
variant="outlined" />
you can use this sample
export default function App() {
const [value, setValue] = useState();
const onChange = ({ target }) => {
let number = parseFloat(target.value);
setValue(number.toLocaleString("en-US", { maximumSignificantDigits: 5 }));
};
return (
<div className="App">
<Input onChange={onChange}></Input>
<h2>{value}</h2>
</div>
);
}