react js fill in form from state after showing it - javascript

in my react.js project I am using Ant design and I need to fill in my form in modal with values from state when the form is showed. Consider the following code sandbox: SANDBOX
Here we have modal with title field and value of title stored in state:
formfields:{
title: "Some Title Here"
}
So when the form is showed I need the title field filled with Some Title Here. The main problem is that I dont want to place value of <Input> as this.state.formfields.title, so I dont want the state to update on every keystroke. Actually I need only take the data from state when the form is showed and update the state only when the form is submitted. No state updates should occur when the user inputs data into form fields. I checked some kind of THIS and THIS but it did not seem to work (maybe because of modal, anyway I dont know whether it is correct to do this like that).
Any ideas would be welcome. Thank you.

Maybe you should set the value as a state value and set the formfields.title one when the form is submitted. If I understood your problem correctly, I mean...

Related

How to restore mui component(s) (Autocomplete, Textfield) to its previous state in the ui?

I need to restore the UI state of an Autocomplete to its previous state in the UI.
I have a form where I have several MUI Autocompletes. Using the data I get from them in their onChange method, I fetch data from an API and fill a table with that data. But when I change an autocomplete with the table filled, I show a modal where I ask the user wheter he want to loose the data of the table or keep his previous selection. I got that to work well in the variables and prevent the values of change, but my problem is that the UI register the change in the Autocomplete.
Hope someone could help me with that. Thanks in advance.

Display input from text-fields on webpage XSS vulnerability or not? (React.js)

Currently I am developing an eCommerce platform with Node and React where the user has to fill in a form their shipment information + email and after they submit that information they receive the shipping cost calculation. The thing is I also want to display the submitted information on the webpage in case the user misspelled something and needs to edit the information. I will not use dangerouslySetInnerHtml for this I was more thinking of just rendering the state values of the input. Can I do that or am I enabling an XSS attack by displaying the users input on to the webpage?
From what I understand the values of the state variable will not be rendered as HTML and instead as a string. Therefore, I should be fine doing this?
You are correct. Provided that you are not using dangerouslySetInnerHtml, the content that was input by your users will render as text.
By using use dangerouslySetInnerHtm you will be putting yourself at risk of an XSS attack by displaying the user's input on the webpage, the best way as is to do the following:-
Render the data submitted by the user (shipment information) on a
page and put an edit button
When the edit button is clicked, the
data of the object that you want to edit will be accessed by ID
Render the data to a component that contains editable field and a
submit button which will be clicked once editing the data is done

How to store form data In temporarily react js?

I have a registration form, I'm filling some form elements. Meanwhile if I click term and condition link. It'll redirect to that page. After come back same register page, there is all fields are empty. Again I start to fill up form from scratch.
So I need whatever I fill up as auto fill in form elements. That means my state values updated. How to possible in React JS?
There are multiple approaches to this problem.
Pass data to the new navigated page, and on completion of the action, you can pass back data to the registration form and have your form populated.
Store all data in a state, and update state on each form input entry. So, once all entries are made your state is updated with all values. The only constraint here is that, the DOM node shouldn't go out of scope or shouldn't disappear from the DOM tree.
Use redux to store all form values
I myself am not familiar with React, but this seems like a great tutorial on how to handle form in the ReactJS. His form seems to remember the previous input even after reload, also he generates the form dynamically, and he provides nice JSFiddle code on Fiddle code:this link.
Hope this has what you are looking for.

form controls are hidden when adding form tags

So, I'm having a little issue here with angular and forms
I'm creating a dynamic form, and it works correctly, but I needed to add some validations.
So I started to follow this guide and I set it up correctly, but when I set the form tags to surround my form controls, I'm getting a blank form
But, if I comment the form tags, I get my form perfectly
Any idea of why this is happening???
I have a couple of validation to show fields based on values, like
custConfig is part of the scope, could the name of the form be interfering with the retrieval of the custConfig variable? and if its such, how can I fix this?
Thanks
Your using a repeater
ng-repeat="deliver in shipmentDetails"
Do you have anything in your object shipmentDetails array? if not then the form will not show anything

How to improve the onChange attribute to effect the changes after browser refresh?

I have a dynamic form which depending on the value in a pull down selection field will either show or hide a form fieldset.
e.g. Do you wish to get a quote just now? [YES/NO]
This works fine the way it is at the moment however there is a limitation when the user refreshes the form and the value is still intact however the changes that should have made an effect on the document are not shown. i.e. it is reset to its original state
The only way to remedy this is to redo the selection in that form field i.e. (reclick Yes/No).
Is there anyway I can workaround this problem? Perhaps a seperate javascript that checks the value of that field?
How would you tackle it?
Thanks
A refresh reinitialises the page so will reset everything that the browser doesn't remember for you. The only way would be to store the value in a session/cookie and read it each time the page is loaded to check if the fieldset should be shown on hidden.

Categories