title: Passing props to children in React
body: <p>I'm trying to make a <strong>Formik wrapper</strong> which takes <code>children</code> as props and would <strong>render anything put inside</strong>. There are a couple forms to make which take different initial values and validation schema etc. The <strong>only thing in common thing is the grid layout</strong>. The goal is to have the access to <strong>Formik <a href="https://jaredpalmer.com/formik/docs/api/formik#formik-render-methods-and-props" rel="noreferrer">props</a></strong> like values, errors etc. in the child component and I have no idea how to pass it to its child. The form fields don't even show up.</p>
  
  <p>The wrapper:</p>
  
  <pre><code>import React from 'react';
  import { Formik, FormikConfig, FormikValues } from "formik";
  import { Col, Layout, Row } from "antd";
  
  const FormContainer: React.FC&lt;FormikConfig&lt;FormikValues&gt;&gt; = ({ children, ...props }) =&gt; {
      return &lt;Formik
          {...props}
      &gt;
          {props =&gt; (
              &lt;Layout&gt;
                  &lt;Row style={{ height: "100vh", display: "flex", alignItems: "center" }}&gt;
                      &lt;Col span={12}&gt;
                          &lt;Layout&gt;
                              {/*this will be replaced with some background image*/}
                              &lt;pre&gt;{JSON.stringify(props.values, null, 2)}&lt;/pre&gt;
                              &lt;pre&gt;{JSON.stringify(props.errors, null, 2)}&lt;/pre&gt;
                          &lt;/Layout&gt;
                      &lt;/Col&gt;
                      &lt;Col span={12}&gt;
                          &lt;Layout&gt;
                              {/*here goes goes a Form from a different components*/}
                              {children}
                          &lt;/Layout&gt;
                      &lt;/Col&gt;
                  &lt;/Row&gt;
              &lt;/Layout&gt;
          )}
      &lt;/Formik&gt;
  };
  
  export default FormContainer;
  </code></pre>
  
  <p>I must be doing something wrong. I am unable to get any Formik props/values from anywhere else when I wrap <code>FormContainer</code> around anything.</p>
  
  <p>My form example (so far):</p>
  
  <pre><code>import React from "react";
  import { Field, Form } from "formik";
  import { Col, Form as AntForm, Icon, Input, Row } from "antd";
  import { initialValues, validationSchema } from "./fieldValidation";
  import FormContainer from "../../../containers/FormContainer/FormContainer";
  
  const RegisterPage: React.FC = () =&gt; {
      return (
          &lt;FormContainer
              initialValues={initialValues}
              validationSchema={validationSchema}
              onSubmit={(data, { setSubmitting }) =&gt; {
                  setSubmitting(true);
  
                  setTimeout(() =&gt; {
                      alert(JSON.stringify(data, null, 2));
                      setSubmitting(false);
                  }, 5000);
              }}
          &gt;
              {({touched, errors}) =&gt; (
                  &lt;Form&gt;
                      &lt;Row gutter={[8, 8]}&gt;
                          &lt;Col span={12}&gt;
                              &lt;AntForm.Item
                                  help={touched.firstName &amp;&amp; errors.firstName ? errors.firstName : ""}
                                  validateStatus={touched.firstName &amp;&amp; errors.firstName ? "error" : undefined}
                              &gt;
                                  &lt;Field
                                      name="firstName"
                                      prefix={&lt;Icon type="solution" style={{ color: "rgba(0,0,0,.25)" }} /&gt;}
                                      placeholder="First name"
                                      as={Input}
                                  /&gt;
                              &lt;/AntForm.Item&gt;
                          &lt;/Col&gt;
                          &lt;Col span={12}&gt;
                              &lt;AntForm.Item
                                  help={touched.lastName &amp;&amp; errors.lastName ? errors.lastName : ""}
                                  validateStatus={touched.lastName &amp;&amp; errors.lastName ? "error" : undefined}
                              &gt;
                                  &lt;Field
                                      name="lastName"
                                      prefix={&lt;Icon type="solution" style={{ color: "rgba(0,0,0,.25)" }} /&gt;}
                                      placeholder="Last name"
                                      as={Input}
                                  /&gt;
                              &lt;/AntForm.Item&gt;
                          &lt;/Col&gt;
                      &lt;/Row&gt;
                  &lt;/Form&gt;
              )}
          &lt;/FormContainer&gt;
      );
  };
  
  export default RegisterPage;
  </code></pre>
  
  <p>I'm stuck. What am I doing wrong here?</p>