react final form prevent formatted value from storing in form state
I have an input component where when user enters anything it formats it in a particular way.But the formatted part I want just for the sake of displaying and not storing in the form state.
Here is an example of it
In the price field after entering the value, on blur of it, the value is formatted with comma(,) like so $1,212,121.00, but this value I want it for display purpose only and not in state.In state it should be stored as 1212121 or 1212121.00 anything is fine.Tried using parse as mentioned in docs but since formatOnBlur is being used so format runs after parse.How shall I do it?
javascript reactjs react-final-form
asked Jan 18 at 12:28
priteshpritesh
1,264617
add a comment |
I have an input component where when user enters anything it formats it in a particular way.But the formatted part I want just for the sake of displaying and not storing in the form state.
Here is an example of it
In the price field after entering the value, on blur of it, the value is formatted with comma(,) like so $1,212,121.00, but this value I want it for display purpose only and not in state.In state it should be stored as 1212121 or 1212121.00 anything is fine.Tried using parse as mentioned in docs but since formatOnBlur is being used so format runs after parse.How shall I do it?
javascript reactjs react-final-form
asked Jan 18 at 12:28
priteshpritesh
1,264617
Store value of input state as it is, and on value call a function that returns formatted text.
– Sameer Reza Khan
Jan 18 at 12:32
value is only for checkbox and radio buttons github.com/final-form/react-final-form#value-any
– pritesh
Jan 18 at 12:36
You have a stateless component anyway - nothing's in the state. Change it to a class component if you want to use state, or use the Hooks API with useState.
– markmoxx
Jan 18 at 12:42
How will it help and I need the data to be stored in form state not in component state @markmoxx
– pritesh
Jan 18 at 12:47
add a comment |
I have an input component where when user enters anything it formats it in a particular way.But the formatted part I want just for the sake of displaying and not storing in the form state.
Here is an example of it
In the price field after entering the value, on blur of it, the value is formatted with comma(,) like so $1,212,121.00, but this value I want it for display purpose only and not in state.In state it should be stored as 1212121 or 1212121.00 anything is fine.Tried using parse as mentioned in docs but since formatOnBlur is being used so format runs after parse.How shall I do it?
javascript reactjs react-final-form
asked Jan 18 at 12:28
priteshpritesh
1,264617
I have an input component where when user enters anything it formats it in a particular way.But the formatted part I want just for the sake of displaying and not storing in the form state.
Here is an example of it
In the price field after entering the value, on blur of it, the value is formatted with comma(,) like so $1,212,121.00, but this value I want it for display purpose only and not in state.In state it should be stored as 1212121 or 1212121.00 anything is fine.Tried using parse as mentioned in docs but since formatOnBlur is being used so format runs after parse.How shall I do it?
javascript reactjs react-final-form
javascript reactjs react-final-form
asked Jan 18 at 12:28
priteshpritesh
1,264617
asked Jan 18 at 12:28
priteshpritesh
1,264617
asked Jan 18 at 12:28
priteshpritesh
1,264617
asked Jan 18 at 12:28
priteshpritesh
1,264617
asked Jan 18 at 12:28
priteshpritesh
1,264617
1,264617
Store value of input state as it is, and on value call a function that returns formatted text.
– Sameer Reza Khan
Jan 18 at 12:32
value is only for checkbox and radio buttons github.com/final-form/react-final-form#value-any
– pritesh
Jan 18 at 12:36
You have a stateless component anyway - nothing's in the state. Change it to a class component if you want to use state, or use the Hooks API with useState.
– markmoxx
Jan 18 at 12:42
How will it help and I need the data to be stored in form state not in component state @markmoxx
– pritesh
Jan 18 at 12:47
add a comment |
Store value of input state as it is, and on value call a function that returns formatted text.
– Sameer Reza Khan
Jan 18 at 12:32
value is only for checkbox and radio buttons github.com/final-form/react-final-form#value-any
– pritesh
Jan 18 at 12:36
You have a stateless component anyway - nothing's in the state. Change it to a class component if you want to use state, or use the Hooks API with useState.
– markmoxx
Jan 18 at 12:42
How will it help and I need the data to be stored in form state not in component state @markmoxx
– pritesh
Jan 18 at 12:47
Store value of input state as it is, and on value call a function that returns formatted text.
– Sameer Reza Khan
Jan 18 at 12:32
Store value of input state as it is, and on value call a function that returns formatted text.
– Sameer Reza Khan
Jan 18 at 12:32
value is only for checkbox and radio buttons github.com/final-form/react-final-form#value-any
– pritesh
Jan 18 at 12:36
value is only for checkbox and radio buttons github.com/final-form/react-final-form#value-any
– pritesh
Jan 18 at 12:36
You have a stateless component anyway - nothing's in the state. Change it to a class component if you want to use state, or use the Hooks API with useState.
– markmoxx
Jan 18 at 12:42
You have a stateless component anyway - nothing's in the state. Change it to a class component if you want to use state, or use the Hooks API with useState.
– markmoxx
Jan 18 at 12:42
How will it help and I need the data to be stored in form state not in component state @markmoxx
– pritesh
Jan 18 at 12:47
How will it help and I need the data to be stored in form state not in component state @markmoxx
– pritesh
Jan 18 at 12:47
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54254055%2freact-final-form-prevent-formatted-value-from-storing-in-form-state%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54254055%2freact-final-form-prevent-formatted-value-from-storing-in-form-state%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Store value of input state as it is, and on value call a function that returns formatted text.
– Sameer Reza Khan
Jan 18 at 12:32
value is only for checkbox and radio buttons github.com/final-form/react-final-form#value-any
– pritesh
Jan 18 at 12:36
You have a stateless component anyway - nothing's in the state. Change it to a class component if you want to use state, or use the Hooks API with useState.
– markmoxx
Jan 18 at 12:42
How will it help and I need the data to be stored in form state not in component state @markmoxx
– pritesh
Jan 18 at 12:47