My team is currently using the react-number-format package with Material UI to format & mask numbers that need formatting. To do this, we use as the InputComponent of Material UIs Text Field.

<https://material-ui.com/components/text-fields/>

I've come across a situation in which the data I get from the API is a decimal, but the user wants to interact with it as a percent.

Ex: 0.1201 should show as 12.01% in the field

The user should be able to edit the field as a percent, but the data must be sent back to the API as a decimal again.

Ex: field changed from 12.01%, to 15.01%, but the value should be stored as 0.1501.

I know how to convert decimals to fractions in JavaScript, but I'm having difficulty getting the value to convert to percent for display, and then back into decimals for storage.

Is there a way to do this with react-number-format? If not, is there a way to do this with Material UI's TextField?