Hailwood – 00-02 Mar 3

Hey folks,

using formik with typescript, we have the render function (as children).

Typescript knows

values

values

is of type

FormikValues

FormikValues

and knows the exact keys/type of values inside values based off

initialValues

initialValues

.

I'm wondering if we can make a prop of a component rendered inside this render function be required to be a key of values?

I.e.

<Formik initialValues={{name: 'bob', age: 32}}>
{({values}) => {

  console.log(
    values.name, //okay
    values.email // errors as it should
  );

  //I want to do this
  return (
    <>
      {/* okay as name is in initial values */}
      <MyFieldComponent name="name" /> 

     {/* should error as email is not in initial values */}
      <MyFieldComponent name="email" /> 
    </>
  );

}};
</Formik>

<Formik initialValues={{name: 'bob', age: 32}}>
{({values}) => {

  console.log(
    values.name, //okay
    values.email // errors as it should
  );

  //I want to do this
  return (
    <>
      {/* okay as name is in initial values */}
      <MyFieldComponent name="name" /> 

     {/* should error as email is not in initial values */}
      <MyFieldComponent name="email" /> 
    </>
  );

}};
</Formik>

Hailwood – 00-02 Mar 3

Similar Threads