How to add props to the components being rendered inside the Formik form

[juanjoseluisgarcia]

in the step props we have an array of objects that basically have a component and a validationSchema. How can I pass props to the component part?

[codenimble]

The signature for the componet is dictated by FormikWizard. But you can use functional programming techniques.

This is what is legal to pass to the function that creates your ReactElement. To make it a little cleaner for me, I created a type based on what you can legally pass in and what I use, for example:

export` type WizardStepComponentProps = {
  values: FormikValues;
  touched: FormikTouched<FormikValues>;
  errors: FormikErrors<FormikValues>;
  handleChange: FormikHandlers['handleChange'];
  currentStepIndex: number;
};

So the step component signature looks like this:

(sp: WizardStepComponentProps) => React.ReactElement

Using functional programming you can create an anonymous function that wraps what ever you want and pass it to some function that generates a ReactElement. For example in my code for one of my steps:

component: (sp: WizardStepComponentProps) => {
  const fieldName = "phq9_5";
  const question = <span>Poor appetite or overeating.</span>;
  const clarify = PHQ9ClarifyDefaultText;
  const tracking = <span>5 of 9</span>;
  const options = PHQ9Options;
  return QuestionPickOneCard(sp, fieldName, question, clarify, tracking, options);
},
validationSchema: () => { return PickOneValidation<PHQ9Enum>("phq9_5");  }

For this particular step I am using my QuestionPickOneCard but it is customized for this step.

If you want to coordinate across steps etc., you can always create a context and add it your values and thus you will always have it in scope as values is passed into your rendering function e.g.create a map and add it to your values. You can use an underscore convention e.g. _ctx or somesuch to distinguish it. Or you can have some other in scope context that you use.

Hope that helps @juanjoseluisgarcia