I am facing a couple of issues with my dynamic form ( add, remove fields ) using redux form (redux-form/immutable).
Validation fails for dynamically added fields, since initialValues doesn't have a default value for it.
When I remove a newly added field after having added some text to it, the text entered shows up in a field I add subsequently.
I have gone through Erik Rasmussen's presentation here https://www.youtube.com/watch?v=eDTi7lYR1VU&feature=youtu.be , and I am following a similar approach.
I can see the form data in the state using redux devtools. Also, I found in the documentation that we can change the form's state. ( http://redux-form.com/6.4.0/docs/api/ReducerPlugin.md/ )
I am trying to see if I can make it work using this. Will update my observations/findings here. Please let me know if there is an easier way to achieve this.
Using FieldArrays solves the problem. It takes care of updating the form state in redux in a proper way. Earlier I was just using Fields and iterating over List stored in the component's state and modifying it on add/delete.
Related
I'm using react-hook-form useFieldArray. I have prepopulated the initial data which I got from API. I have almost 20 objects in an array. how can I know only which object data is changed.
Check formState.isDirty to see if the user changed any of the input fields, or formState.dirtyFields to get the specific fields changed by the user.
https://react-hook-form.com/api/useform/formstate
I'm using react-select with react-final-form and I need to have two selects, where the selected option in the first select dynamically sets the options for the second select. For example, when option One is selected in the first select, the second select gets options One A and One B.
These selects are used in an array. Here is my codesandbox with initial setup https://codesandbox.io/s/react-final-form-field-arrays-e4mm6?fontsize=14.
I've found two similar examples, but I don't know how to adapt them to my use case.
First, I've found this example for react-final-form which sets field's value using createDecorator, but it's used for the value of the field and not the options prop.
Second, I've found this example for react-select which sets options dynamically using state, but I don't know how I can adapt it to my case, considering field arrays.
I would appreciate any help.
Interesting, problem. Here ya go. I created a <PickOptions/> component that watches the first field and provides the options to the second. It also clears the second field when the value of the first changes, which seemed like something you'd want. You could also set it to the first option in the array or something...
I am developing a ReactJs quiz app in which I am having problem with validating the answers that is in the json.
I did this quiz app using react version 16.8 using state components and fetched the json data and stored in state using map function I have the completed the view part, now I started to validate the quiz and I am struggling in that part.
here is the full code:https://codesandbox.io/s/mystifying-firefly-2d2x5
and also ill add my json link: http://myjson.com/kpop9
I want the answer should be validated, and if user clicks the submit button before attempting all the questions it should show that you have unanswered questions and if user clicks submit after attempting all the quiz it should display the total marks that user got.
Replying to your comment from above, here is your sandbox code slightly edited. You can submit an answer at any time and these are the alerts you should see:
When you don't select an answer: Alert with message No nulls
When answer is wrong: Alert with message wrong
When answer is correct: Alert with message correct
Here is your edited sandbox
The solution provided is only example, and should not be treated as a perfect solution, it's only to give you an idea of how this may work (you may still want to implement the bit, when after submitting the last answer, scores are calculated - for that you may want to store scores)
Explanation:
In this example I decided to add selected_answer variable in the index.js that stores currently selected answer on the form.
Next, I created setAnswer function in index.js which accepts a selected answer as parameter and sets the selected_answer in state to whatever is passed in. You are welcome to implement as many checks for the value that is passed in as you want
setAnswer function is then passed to your Answer component, so when the value is changed, it can be saved inside index.js state
Result component receives the index.js state as a prop. This allows it to have access to current question, the array of all questions and currently selected value
Inside Result component there is a validateAnswer function that is triggered when submit button is clicked. Inside that function I use the props.current_question (which is the index of a question) to extract the whole question object from your JSON file. Next I filter over the array of answers from previously created question object, and I extract the one that has is_right set to 1. Finally, I check if the props.selected_answer is empty, and display a message if so. If it isn't, I check if it equals to the value of previously extracted correct answer object. And voila!
As mentioned before, this is not the best solution, but one that works on top of your code without changing much. Please let me know if you have any further questions, but hope that helps a bit.
I was asked to develop a multi-step form in React. The form contains 30 fields to be filled and it should be displayed in 3 steps of 10 fields each.
The first 2 steps have "Save" and "Next step" options to save the current work or continue with the next step.
The final step has "Save" and "Finish form" options, both of them will save the form in the database (through a web service).
Something like this:
The project is made on React, using Mobx for the state management, and I'm new to react. My question here is... how should i manage the states and the stores?
Should i have a single Store (FormStore) with the 30 fields and pass it to each component through the props and they will fill each field?
Is there any way i can have a single store (like a singleton) and each component fills its fields there?
I have to manage the fields information in memory untill the Save button is hit. And if when the Save button is hit, i need to save just the filled fields.
Any kind of guide will be appreciated.
If this form data is not changed anywhere else in your application, you can use a single store for all. I cannot think of any disadvantage given that it is relatively small.
You would want to split it if the answers could be put in different categories and different categories would be mutated by different functionalities of your app.
i need to create a component dynamically by a button click. My restrictions are:
It's going to has an Id starts with a fixed string like 'myComp_' and followed by a random number
At any time there will be only one component that has an id starts with 'myComp_xxx'
So before creating the component i have to check if there's any created before and remove it... My problem starts here. Ext.getCmp() wants the specific id. But i only have that fixed string : myComp_...
Is there any way to get the component created before???
Thanks in advance and sorry about my English.
For ExtJs 4.X use Ext.ComponentQuery.query('*[id^=myComp_xxx]');
For ExtJs 3.X you can either use the following
var el = Ext.query('*[id^=myComp_xxx]');
var cmp = Ext.getCmp(el.id);
Or (this one i haven't tried personally, but i think it should work) if the component is a child of a component that you can access, then:
var el = parentComp.find("action","btn");
and set a property called action : btn in the button config.
I think what you are looking for is DomQuery.
Ex:
Ext.query("*[id^=myComp_xxx]")
You need to use this: Ext.getCmp(id)
Ext.getCmp("myComp_xxx");
Sounds like you should be using the normal component query stuff - in general it is not a good idea to use id. You can query by xtype and by itemId (which you can assign manually).
The following
Ext.ComponentQuery.query('grid form');
would find all things with xtype grid that have forms inside them somewhere.
Ext.ComponentQuery.query('grid #okButton');
whereas the # here is saying look for grids that have something with itemId 'okButton' in them.
You can nest this to whatever level you need and use other operators to be more specific and as someone else has rightly pointed out you can use up and down on components to do this relative to the current component. Its worth noting that rather than getting an array back with all the results you just get the first one when you use up and down.
See the documentation for more information this.
Also see point 6 on this list of bad practices to avoid for more of the why
Another alternative if you know 'where' your component is going to be created is to use the up()/down() methods.
E.g. if you have a button and want to get the form it's contained within inside a click handler you can do something like this:
function myClickHandler(btn) {
var form = btn.up('form');
//do something with form
}