import React, { Component } from 'react';
import { Form, FormApi, NestedField, Text } from 'react-form';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Form component={FormContent} />
      </div>
    );
  }
}

export default App;

class FormContent extends React.Component {
  componentDidMount() {
    const { formApi } = this.props;
    formApi.setAllValues({
      hello: 'hello',
      parent: {
        hi: 'hi'
      }
    });
  }
  render() {
    return (
      <form onSubmit={this.props.formApi.submitForm}>
        <Text field="hello" id="hello" />
        <br />
        <NestedField
          field="parent"
          id="parent"
          render={() => <Text field="hi" id="hi" />}
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}