Question: I have a text field:

```
  <Grid item xs={12} sm={6}>
      <BzTextField
        fullWidth
        label="dec"
        value={company.dex}
      />
    </Grid>

```

what I am trying to do is to create a new component so I can create a new input type number which must add 3 decimal digits (ex. 3.3 becomes 3.300). I am having problem with how to implement something like this. Should I use Hooks or is there an easier way.

also the validation should be onChange and not on keyUp.

Answer: 
You can do it by creating a controlled input and using input's onBlur feature, which will execute onBlur function when you are done editing the input. This function will change add 3 decimal digits to the number.

```
function App() {
const [input, setInput] = React.useState("")
const onBlur = () => {
    setInput(parseFloat(input).toFixed(3))
}
return (
<div >
    <body>
        <input
            type="number"
            value={input}
            onChange={e=>setInput(e.target.value)}
            onBlur={onBlur}
        />
    </body>
</div>
);
}

```
**Try This:**

```
const x = 3.3;
const y = x.toFixed(3);
console.log(y);

// result 3.300

```

> 
> **Explanation:**  
> 
> here `toFixed(n)` method used to extend value.  
> 
> *Where `n` is the number you want to extend value of number.*
> 
> 
> 

> 
> [Click here for more info](http://www.w3schools.com/js/js_number_methods.asp)
> 
> 
>