How to initialize the form input values by passing an object?

Question

I am trying to create a edit form using formsy-react. Is there a way to use an object to initialize the form input values in formsy-react instead of manually doing <Input value={this.state.someValue} />.

The code for my form is below.

<Formsy.Form className="horizontal" onValidSubmit={this._handleSubmit.bind(this)}>            
  <fieldset>                                                                                                             
    <legend>Product Details</legend>                                                                                     
    <Input name="name" label="Name" type="text" required />                                                              
    <Input name="sku" label="SKU" type="text" required />
  </fieldset>                                                                                                            
                                                                                                                         
  <fieldset>                                                                                                             
    <Row layout='horizontal'>                                                                                            
      <input className="btn btn-primary" formNoValidate={true} type="submit" defaultValue="Submit" /> &nbsp;             
      <button className="btn btn-default" onClick={this._handleCancel.bind(this)}>Cancel</button>                        
    </Row>                                                                                                               
  </fieldset>                                                                                                            
</Formsy.Form>                                                                                                           

Answer 1

You can get a ref to the Formsy.Form and call the reset function with an object that fills the form.

import React, { Component } from 'react';
import Formsy from 'formsy-react';
import { Input, Row } from 'formsy-react-components';

class App extends Component {
    componentDidMount() {
        this.handleReset();
    }
    handleReset = () => {
        this.formsyForm.reset({name: 'Widget', sku: 'abc-123'});
    }
    handleSubmit = (formData) => {
        console.log(formData);
    }
    render() {
        return (
          <Formsy.Form ref={(formsyForm) => { this.formsyForm = formsyForm; }} className="horizontal" onSubmit={this.handleSubmit}>
              <fieldset>
                  <legend>Product Details</legend>
                  <Input name="name" label="Name" type="text" value="" required />
                  <Input name="sku" label="SKU" type="text" value="" required />
              </fieldset>
              <fieldset>
                  <Row layout='horizontal'>
                      <input className="btn btn-primary" formNoValidate={true} type="submit" defaultValue="Submit" /> &nbsp;
                      <button className="btn btn-default" type="button" onClick={this.handleReset}>Reset</button>
                  </Row>
              </fieldset>
          </Formsy.Form>
        );
    }
}

export default App;