Formik: How to create a dynamic form using react native?

[brunohkbx]

I'm trying to implement a form like this one https://github.com/jaredpalmer/formik#fieldarray-array-of-objects
on react native.

Is it possible to use this FieldArray ?

I've been trying to make it work with something like that:

<FieldArray
  name="questions"
  render={arrayHelpers => (
    <View>
      {
        values.questions.map((question, index) => (
          <View key={index}>

          </View>
        ))
      }
      <FAB handlePress={() => arrayHelpers.push({ question: '' })} />
    </View>
  )}
/>

I got this error

[brunohkbx]

@jaredpalmer can you help me?

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale[bot]]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[brodybits]

On Mon, Nov 5, 2018 at 4:20 PM stale[bot] [e-mail] wrote:
>

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

Does not look resolved

[1070rik]

Hey, i think I found a way to create a dynamic form. So, here's how it works.

the values and errors you get back from formik are basically arrays, so you can just access the data with the bracket notation instead of dot notation.

I made a codesandbox that showcases how it works: https://codesandbox.io/embed/oo1xon7vl5
In this example I used numbers as the names for the input but you can make it anything as long as its not an actual number because then it will of course see it as an index.

I hope it helps anyone who has this issue too in the future.

Cheers!

[worldsayshi]

Here's a slightly alternative way of doing this. With the pro that items are directly stored into lists:

import { Formik } from 'formik';
import React from 'react';
import {Button, Text, TextInput, View} from 'react-native';

const createQuestion = () => ({
  text: ''
});

/*
* Form for submitting a bunch of questions
* */
const HelloForm = () => {
  return (
    <Formik
      initialValues={{ questions: [], }}
      onSubmit={values => console.log(values)}
    >
      {({ handleChange, handleBlur, handleSubmit, values, setFieldValue }) => (
        <View>
          <Text>Here you can submit all your questions!</Text>
          {values.questions.map(({ text }, index) => (
            <TextInput
              key={index}
              onChangeText={handleChange(`questions[${index}].text`)}
              onBlur={handleBlur(`questions[${index}].text`)}
              value={values.questions[index].text}
            />
          ))}
          <Button onPress={() => setFieldValue('questions', [...values.questions, createQuestion()])} title="Add question" />
          <Button onPress={handleSubmit} title="Submit" />
        </View>
      )}
    </Formik>
  )
};

export default HelloForm;

[AvneeshD]

Here's a slightly alternative way of doing this. With the pro that items are directly stored into lists:

import { Formik } from 'formik';
import React from 'react';
import {Button, Text, TextInput, View} from 'react-native';

const createQuestion = () => ({
  text: ''
});

/*
* Form for submitting a bunch of questions
* */
const HelloForm = () => {
  return (
    <Formik
      initialValues={{ questions: [], }}
      onSubmit={values => console.log(values)}
    >
      {({ handleChange, handleBlur, handleSubmit, values, setFieldValue }) => (
        <View>
          <Text>Here you can submit all your questions!</Text>
          {values.questions.map(({ text }, index) => (
            <TextInput
              key={index}
              onChangeText={handleChange(`questions[${index}].text`)}
              onBlur={handleBlur(`questions[${index}].text`)}
              value={values.questions[index].text}
            />
          ))}
          <Button onPress={() => setFieldValue('questions', [...values.questions, createQuestion()])} title="Add question" />
          <Button onPress={handleSubmit} title="Submit" />
        </View>
      )}
    </Formik>
  )
};

export default HelloForm;

I'm trying to also add a remove field button but the UI only repaints once I press the submit button, the field does not get removed immediately here's the code
<Button function={() => setFieldValue('skills', [...values.skills, createSkillField()]) }> + </Button> <Button function={() => values.skills.splice(-1, 1)}>-</Button>

[anthowm]

@AvneeshD I suppose you figure it out but for future readers like me ^^

<Button
                                        onPress={() => {
                                            formikProps.values.menus.pop();
                                            formikProps.setFieldValue('questions', [...formikProps.values.questions]);
                                        }}>
                                        Delete question
                                 </Button> 

[nachiket-asbuilt]

Here's a slightly alternative way of doing this. With the pro that items are directly stored into lists:

import { Formik } from 'formik';
import React from 'react';
import {Button, Text, TextInput, View} from 'react-native';

const createQuestion = () => ({
  text: ''
});

/*
* Form for submitting a bunch of questions
* */
const HelloForm = () => {
  return (
    <Formik
      initialValues={{ questions: [], }}
      onSubmit={values => console.log(values)}
    >
      {({ handleChange, handleBlur, handleSubmit, values, setFieldValue }) => (
        <View>
          <Text>Here you can submit all your questions!</Text>
          {values.questions.map(({ text }, index) => (
            <TextInput
              key={index}
              onChangeText={handleChange(`questions[${index}].text`)}
              onBlur={handleBlur(`questions[${index}].text`)}
              value={values.questions[index].text}
            />
          ))}
          <Button onPress={() => setFieldValue('questions', [...values.questions, createQuestion()])} title="Add question" />
          <Button onPress={handleSubmit} title="Submit" />
        </View>
      )}
    </Formik>
  )
};

export default HelloForm;

How to add validation to the text field using yup?

[lluisemper]

Here's a slightly alternative way of doing this. With the pro that items are directly stored into lists:

import { Formik } from 'formik';
import React from 'react';
import {Button, Text, TextInput, View} from 'react-native';

const createQuestion = () => ({
  text: ''
});

/*
* Form for submitting a bunch of questions
* */
const HelloForm = () => {
  return (
    <Formik
      initialValues={{ questions: [], }}
      onSubmit={values => console.log(values)}
    >
      {({ handleChange, handleBlur, handleSubmit, values, setFieldValue }) => (
        <View>
          <Text>Here you can submit all your questions!</Text>
          {values.questions.map(({ text }, index) => (
            <TextInput
              key={index}
              onChangeText={handleChange(`questions[${index}].text`)}
              onBlur={handleBlur(`questions[${index}].text`)}
              value={values.questions[index].text}
            />
          ))}
          <Button onPress={() => setFieldValue('questions', [...values.questions, createQuestion()])} title="Add question" />
          <Button onPress={handleSubmit} title="Submit" />
        </View>
      )}
    </Formik>
  )
};

export default HelloForm;

How to add validation to the text field using yup?

You can defined the shcema something like this
const validationSchema = Yup.object().shape({ ARRAY: Yup.array().of( Yup.object().shape({ key1: Yup.string() .trim() .max(2000) .required() .label("Link"), key2: Yup.string().required().min(5).max(255).label("Name"), }) ), });

latter on display the errors like:
{errors?.ARRAY && errors?.ARRAY.map((x, i) => x ? (i === index ? x.key1 : null) : null )}

Also onPress I have added
` onPress={() => {
validateForm();
setTimeout(() => {
handleSubmit();
});
}}

`