Hailwood – 00-02 Mar 3

Hey folks,

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

Typescript knows valuesvalues is of type FormikValuesFormikValues and knows the exact keys/type of values inside values based off initialValuesinitialValues.

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>

Reactiflux•5y ago

Hailwood

Hailwood – 00-02 Mar 3

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

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

Reactiflux

The largest chat community for React professionals

77,734 Members

Join