React - Formik - Field Arrays - implementing repeatable form fields

Question

I am trying to follow the Formik documentation on using FieldArrays so that I can add repeatable form elements to my form.

I've also seen this Medium post setting out an example.

I'm slow to learn and can't join the dots between the documentation and the implementation.

I want to have a button in my main form that says: "Add a request for data".

If that button is selected, then a nested form setting out the data profile is displayed, along with "add another data request" and "remove" buttons.

I have made the nested form in another component in my application, but I'm struggling to figure out how to use the example from the medium post to incorporate the nested form (as a repeatable element - ie someone might want 5 data requests).

Are there any examples of how to implement this?

In my code, I have basically followed the medium post, but tried to link the Data Request form component inside the index

This is plainly incorrect, but I can't get a handle on how to do this.

Taking Nithin's answer, I've tried to modify the embedded form so that I can use react-select, as follows, but I'm getting an error which says:

TypeError: Cannot read property 'values' of undefined

import React from "react";
import { Formik, Form, Field, FieldArray, ErrorMessage, withFormik } from "formik";
import Select from "react-select";


import {
  Button,
  Col,
  FormControl,
  FormGroup,
  FormLabel,
  InputGroup,
  Table,
  Row,
  Container
} from "react-bootstrap";

const initialValues = {
  dataType: "",
  title: "",
  description: '',
  source: '',

}


class DataRequests extends React.Component {

  render() {
    const dataTypes = [
      { value: "primary", label: "Primary (raw) data sought" },
      { value: "secondary", label: "Secondary data sought"},
      { value: "either", label: "Either primary or secondary data sought"},
      { value: "both", label: "Both primary and secondary data sought"}
    ]

    return(
       {
          return (
            
                {form.values.dataRequests.map((_notneeded, index) => {
                return (
                  
                    
                      
                        
                          
                            
                              Title
                              
                              
                            
                          
                        
                        
                            
                              
                                Description
                                  
                                  
                                  
                            
                        
                        
                          
                            
                              Do you know who or what sort of entity may have this data?
                                
                                
                                
                          
                        
                        
                          
                            
                              
                              Are you looking for primary (raw) data or secondary data?
                              

                              
                        

                        
                          
                        
                      
                        
                  
                );
              })}
              

            
          )
          }
          }
      />
    );  
  };
};


export default DataRequests;

Nithin Thampi · Accepted Answer

You 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.

{
    firstName: "",
    lastName: "",
    dataRequests: []
  }

Here firstName and lastName are top level form fields and dataRequests can be an array where each element follows the structure

{
  requestField1: "",
  requestField2: ""
}

Since dataRequests is an array, for rendering each item of FieldArray you need a map function.

form.values.dataRequests.map( render function() )

And for each rendered item, the change handlers should target their index to update the correct item in FieldArray.

In the above snippet name={dataRequests.${index}.requestField1} asks formik to update the key requestField1 of nth element of dataRequests array with the value of the input field.

Finally your component might look something like below.

import React from "react";
import { Field } from "formik";

export default ({ form, remove, push }) => {
  return (
    
      {form.values.dataRequests.map((_notneeded, index) => {
        return (
          
            
            
            
          
        );
      })}
      
    
  );
};

And using you can connect to the main form.

You can try out the below sample SO snippet

function DataRequests({ form, remove, push }){
  return (
    
      {form.values.dataRequests.map((_notneeded, index) => {
        return (
          
            
            
            
          
        );
      })}
      
    
  );
};


class Home extends React.Component {
  initialValues = {
    firstName: "",
    lastName: "",
    dataRequests: []
  };
  state = {};
  render() {
    return (
      
         {
            this.setState({ formData: values });
          }}
        >
          {() => {
            return (
              
                
                  
                
                
                  
                
                
                
              
            );
          }}
        
        {this.state.formData ? (
          {JSON.stringify(this.state.formData, null, 4)}
        ) : null}
      
    );
  }
}

ReactDOM.render(, document.getElementById("root"))

React - Formik - Field Arrays - implementing repeatable form fields

Answers (2)

Related Questions