title: React + Formik: Use value for nested object
body: <p>I have the following model for my React (TypeScript) app:</p>
  
  <pre class="lang-js prettyprint-override"><code>interface IProjectInput {
      id?: string;
      name: string | i18n;
      description: string | i18n;
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>export interface i18n {
      [key: string]: string;
  }
  
  </code></pre>
  
  <p>I am using <code>Formik</code> and <code>react-bootstrap</code> to create a new <code>ProjectInput</code> from a <code>Form</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { i18n as I18n, ... } from 'my-models';
  
  interface State {
      validated: boolean;
      project: IProjectInput;
  }
  
  /**
   * A Form that can can edit a project
   */
  class ProjectForm extends Component&lt;Props, State&gt; {
      constructor(props: any) {
          super(props);
          this.state = {
              project: props.project || {
                  name: {},
                  description: ''
              },
              validated: false
          };
      }
  
      async handleSubmit(values: FormikValues, actions: FormikHelpers&lt;IProjectInput&gt;) {
          let project = new ProjectInput();
          project = { ...project, ...values };
          console.log("form values", values);
          // actions.setSubmitting(true);
          // try {
          //     await this.props.onSubmit(project);
          // } catch (e) { }
          // actions.setSubmitting(false);
      }
  
      render() {
          const { t } = this.props;
          const getCurrentLng = () =&gt; i18n.language || window.localStorage.i18nextLng || '';
          const init = this.state.project || {
              name: {},
              description: ''
          };
  
          return (
              &lt;div&gt;
                  &lt;Formik
                      // validationSchema={ProjectInputSchema}
                      enableReinitialize={false}
                      onSubmit={(values, actions) =&gt; this.handleSubmit(values, actions)}
                      initialValues={init}
                  &gt;
                      {({
                          handleSubmit,
                          handleChange,
                          handleBlur,
                          values,
                          touched,
                          errors,
                          isSubmitting,
                          setFieldTouched
                      }) =&gt; {
  
                          return (
                              &lt;div className="project-form"&gt;
                                  &lt;Form noValidate onSubmit={handleSubmit}&gt;
                                      &lt;Form.Row&gt;
                                          &lt;Form.Group as={Col} md={{span: 5}} controlId="projectName"&gt;
                                              &lt;Form.Label&gt;
                                                  {t('projectName')}
                                              &lt;/Form.Label&gt;
                                              // Input for ENGLISH text
                                              &lt;Form.Control
                                                  type="text"
                                                  name="name"
                                                  value={(values['name'] as I18n).en}
                                                  onChange={handleChange}
                                              /&gt;
                                              // Input for FRENCH text
                                              &lt;Form.Control
                                                  type="text"
                                                  name="name"
                                                  value={(values['name'] as I18n).fr}
                                                  onChange={handleChange}
                                              /&gt;
                                          &lt;/Form.Group&gt;
  </code></pre>
  
  <p>So in the end it should look like:</p>
  
  <pre><code>{
    "name": {
      "en": "yes",
      "fr": "oui"
    },
    "description" : "test",
    ...
  }
  </code></pre>
  
  <p>My problem is, that the value for the <code>name</code> input stays empty.</p>
  
  <p>I tried to add <code>const init = this.state.project || { name: { 'en': '' },</code> in my <code>render</code> or for my <code>state</code>, but this did not do anything.</p>