Need help with Formik

1

I need help from someone who is familiar with Formik.

I want to build a series of checkboxes depending on what a user selects in a dropdown. Then I want to send all that info (drop down choice, checkboxes selected) over, when form is submitted.

But I don’t know how to separate the functions that build the checkboxes and the JSX tags that need to be supplied to Formik API. I know I don’t want state to be tracked outside of Formik but I’m just lost as to how to do that??

This is the code; it’s a little rough b/c I am converting old code (that uses useState() with new code in which Formik tracks all state): https://github.com/SabahatPK/recipe-project-mobile/blob/master/screens/BuildPantry.js

And this is the output: https://expo.io/@sabbygirl99/recipe-project-mobile (have to view via Expo app)

Would really appreciate someone’s help that knows Formik!

2

Very basic example in React (no submit or anything):

  • use a multi select, this is the only thing with an initial value
  • map over the values of the multi select to generate checkboxes

Issue may be that you’re using RN components, and for that you’re quite probably going to need to build your own components, you may not be able to just use the existing <Field> component, so carefully read up on the useField hook, which is used to build your own fields:

That will mean you can write a small multi-select which will work the same as the <Field type="select"> component, same for the checkboxes

1 Like
3

Thank you @DanCouper! You’re right, I was getting lost in react-native frameworks and libraries (expo, react-native-elements, formik) and was losing track of what was actually responsible for which parts of my app. Your example will be super helpful. Thanks!

1 Like
4

Hopefully! It’ll need quite a bit of tweaking, I put it together pretty late last night so apologies if I’ve missed anything. The useField hook took me a little while to.get my head around, but the examples are pretty good and I think it’ll make it easy-ish to make use of the custom RN components you’re using

1 Like
5

I continue to (not surprisingly) run into problems.

This is what my code does now:

  1. User selects a category from dropdown. This results in checkboxes.
  2. User then selects a bunch of checkboxes. This results in an array of results.
  3. User clicks "Show Results" button. The app goes to another screen (using React Navigation) where the results will be displayed in a nice format.

My problem is that I need to send the Results data to that new screen. I thought there was a way to do it using React Context (link) but I am not sure where the <FormSubmitContext.Provider> tag goes.

I tied 3 different spots:

  1. In the screen that builds the Results data; I wrapped main <View> with <FormSubmitContext.Provider value={resultsData}>.
  2. In the screen that builds the Results data; wrapped just the <Button> that sends user to new screen with <FormSubmitContext.Provider value={resultsData}>.
  3. In an intermediate screen that builds a component that returns new screen; wrapped like this:
function WrapResultingRecipes({ testContextData }) {
  return (
    <FormSubmitContext.Provider value={testContextData}>
      <ResultingRecipes />
    </FormSubmitContext.Provider>
  );
}

Also updated the onPress value to be:
onPress={(testContextData) => props.navigation.navigate("WrapResultingRecipes")

For each of the above scenarios, I added this code to the new screen component:

const formSubmitData = useContext(FormSubmitContext);
console.log("This is formSubmitData: " + formSubmitData);

But each time, the logs were empty.

Help!

Code can be found here: https://github.com/SabahatPK/recipe-project-mobile/blob/master/screens/BuildPantry.js

6

Don’t try to run your application with Formik: use it for what it is. If you have a form in your code, you can use Formik to handle all the million and one edge cases, because writing forms is painful at the best of times. It isn’t a way to handle how your application runs at a high level

So:

  • keep what you have in Formik
  • onSubmit, store the values you want to state somewhere – this could be context, or it could be a state container like Redux, or it could simply be a useState in the parent.
  • in the other component get the state out. Either out of a common parent, or out of context, or out of a state container, or you could have passed it as a parameter with the navigation
1 Like
7

Except for Formik, I think my code is already doing all the things mentioned above. I.e. adding the extra data via Context and then sending that data to the child component.

I think where I’m running into a problem is b/c I need to also send the React Navigation function to the onPress prop. I don’t see how I can send both pieces of info, i.e. the navigation info and the extra data (from useState). Or rather, I thought I knew how to send both pieces of info but my solution didn’t work.