last day (16 days later) » 

4:24 AM
1
A: React - Formik - Field Arrays - implementing repeatable form fields

nithinYou cannot add nested forms inside a form element. Please refer the below post for mode details. Can you nest html forms? If you are looking to nest multiple fields with a nested structure, inside a main form, you can achieve it using FieldArrays. You can structure the form like. { firstN...

 
Mel
Thanks so much for this. Super helpful.
Please can you explain what this line is doing (or show me where to find an explanation)? {form.values.dataRequests.map((_notneeded, index) => {
I'm trying to convert the dataRequests form into a stateful class so that I can use react-select on one of the form elements, but I'm getting stuck because my latest attempt can't find the definition of values (which is in my list of rendered functions)
I have pasted my current attempt at converting this embedded form to a class above.
 
@Mel I have updated my answer to add more details. Let me know if things are clearer now. Also I have created a REPL with your updated component. Hope this helps...repl.it/repls/RichQuickwittedConditional
 
Mel
thank you so much for taking the time on this. I can't get the repl to run, but I tried your code and it sill throws an error (line 31), with the line: {parentForm.values.dataRequests.map((_notneeded, index) => { . The error message says: TypeError: Cannot read property 'map' of undefined I'm not sure what is supposed to be defined. I tried replacing camelCase on dataRequests with DataRequests, but that didn't solve the problem. Can you see what's left to get this working?
Is this line a placeholder? Am I supposed to replace it with something from the parent form? Maybe that's what's stopping the map function from operating? const {form: parentForm, ...parentProps} = this.props;
Also, when I comment out the map line and try to test the rest of the form, I get another TypeError that says 'remove is not a function' - pointing to this line: onClick={() => remove(index)}. Is there something more than needs to be done to use these functions (it's possible that values isn't working and that's stopping the map function from running?)
Where is 'parentForm' coming from? Is that a function in Formik somewhere? I can't find references to it in the Formik docs (but I am really struggling to learn to code (7 years and still trying to learn every day). What does this line do? const {form: parentForm, ...parentProps} = this.props;
Another question: what does this line (specifically, the number 4) from your repl mean?: {this.state.formData ? ( <code>{JSON.stringify(this.state.formData, null, 4)}</code> ) : null}
 
@Mel If REPL doesn't work, try this. stackblitz.com/edit/react-amh178?file=index.js
 
Mel
That works. Thanks. I can't get it to work in my code. Can you point me to where parentForm is defined? Is there something somewhere that defines it as the form in which the DataRequests component is used? I'm wondering if that's blocking the form from working and throwing all of these errors?
 
4:24 AM
index.js in the code I shared
 
Mel
Also wondering what the number 4 in the stringify statement contributes? Is it a count of the number of questions in the form?
index.js does not have a const defining parentForm. Is it somehow incorporated?
hi
thanks a lot for the help
I'm stuck - I don't know where to find solutions in the formik docs, but maybe these questions aren't formik specific
 
The JSON.stringify is not relevant here. 4 mean intend the string by 4 spaces. Its just for formatting JSON before display
 
Mel
ok, cool - thanks for that
where does parentForm get defined?
 
In index.js <FieldArray name="dataRequests" component={DataRequests} /> passes a lot of props to child component like "form", "push", "delete" ...
 
Mel
ok but in data requests, form is defined as parentForm. where does that get defined? is there a function in formik that provides that definition?
 
4:28 AM
So <DataRequests /> component receives them.
const {form: parentForm, ...parentProps} = this.props;
 
Mel
ok but in data requests component, there is a line that says: const {form: parentForm, ...parentProps} = this.props;
where does the term "parentForm" come from?
 
form: parentForm means pull the form property from props and assign it to a variable called parentForm
 
Mel
I haven't seen it anywhere in the Formik documentation
yes- but which form is parentForm?
 
It's just an Object spread syntax. Not formik specific
 
Mel
I have a tonne of type errors that say values are not defined, I'm wondering if that's because form is not defined properly (it's defined as parentForm)
Ok -but where does parentForm get defined?
I know what the spread operator does on parentForm - but can't find where the term 'parentForm' is defined
 
4:30 AM
wait. Let me give you an example..
 
Mel
i have to go to a meeting
i'll be back in a few hours
i would love to understand this
if you know where i can find how parentForm is defined, that might be the beginning of figuring out how to get this to work
 
Or you can try this in browser console..
const obj = {form: "form", b : "Test1", c: "Test2"};

const {form: parentForm, ...rest} = obj;

console.log(parentForm);
console.log(rest);
"parentForm" was not passed by formik, but "form" was.. I just assigned "form" to a variable called parent "parentForm" just for clarity.

const parentForm = this.props.form also works, if that makes you easier to understand
 
 
19 hours later…
Mel
11:10 PM
but formik has an object called Form
Also, I can't get my code to map the values in the form. I can't debug that until I can understand what that line of code is doing.
The parent form in my code is a component class called ProjectForm. Does that matter (I can see that your example form is not named parentForm, so I think not), but I can't get this code to work
I'll make a share file to show you what's going wrong
 
Mel
11:51 PM
Here is my share code. You can see it does not work. Can you see why? react-b3qz8g.stackblitz.io
I've deleted lots of parts of the main form that aren't relevant to this issue, but can't see what im doing wrong
 

last day (16 days later) »