I have a material-ui Textfield which is amount field
I want to format it so that upon typing, the Textfield has thousands separator and decimal. And bonus, if the input is on the right side (just like in calculators)
e.g. user types 1000000 textfield should show 1,000,000.00
See code below:
<TextField
variant="outlined"
margin="normal"
required
fullWidth
type="text"
id="debitAmount"
label="Amount"
value={debitAmount}
onChange={(e) => setDebitAmount(e.target.value)}
InputProps={{
classes: { input: classes.textfield1 },
}}
/>
I'm trying to use a library called react-number-format
but I'm having a hard time to apply it onto my textfield since the documentation lacks samples
I also tried to use toLocaleString("en")
which was effective however the textfield can only show up to 4 numbers and I'm not sure why