<commit_before># Model Injection

given a model you want to edit:

```jsx
{
  firstName: 'buster',
  lastName: 'brown',
  email: '<EMAIL>'
}
```

longhand:

```jsx
render() {
  let model = this.props.model;
  return (
    <Form formState={this.formState}>
      <Input formField='firstName' label='First' defaultValue={model.firstName}/>
      <Input formField='lastName' label='Last' defaultValue={model.lastName}/>
      <Input formField='email' label='Email' defaultValue={model.email}/>
      <input type='submit' value='Submit' onClick={this.handleSubmit}/>
    </Form>
  );
}
```

shorthand:

```jsx
render() {
  return (
    <Form formState={this.formState} model={this.props.model}>
      <Input formField='firstName' label='First'/>
      <Input formField='lastName' label='Last'/>
      <Input formField='email' label='Email'/>
      <input type='submit' value='Submit' onClick={this.handleSubmit}/>
    </Form>
  );
}
```

a more flexible approach that facilitates dynamic forms:

```jsx
constructor(props) {
  super(props);
  this.formState = new FormState(this);
  this.state = this.formState.createUnitOfWork().injectModel(this.props.model);
  
  this.handleSubmit = this.handleSubmit.bind(this);
}

render() {
  return (
    <Form formState={this.formState}>
      <Input formField='firstName' label='First'/>
      <Input formField='lastName' label='Last'/>
      <Input formField='email' label='Email'/>
      <input type='submit' value='Submit' onClick={this.handleSubmit}/>
    </Form>
  );
}
```

#### Note

do not confuse the use of defaultValue as a property name. react-formstate uses [controlled components](https://facebook.github.io/react/docs/forms.html#controlled-components)<commit_msg>Update modelInjection.md<commit_after># Model Injection

given a model you want to edit:

```jsx
{
  firstName: 'buster',
  lastName: 'brown',
  address: {
    line1: '1900 shoe st'
  }
}
```

longhand:

```jsx
render() {
  let model = this.props.model;
  return (
    <Form formState={this.formState}>
      <Input formField='firstName' label='First' defaultValue={model.firstName}/>
      <Input formField='lastName' label='Last' defaultValue={model.lastName}/>
      <FormObject name='address' labelPrefix='Address '>
        <Input formField='line1' label='Line 1' defaultValue={model.address.line1}/>
      </FormObject>
      <input type='submit' value='Submit' onClick={this.handleSubmit}/>
    </Form>
  );
}
```

shorthand:

```jsx
render() {
  return (
    <Form formState={this.formState} model={this.props.model}>
      <Input formField='firstName' label='First'/>
      <Input formField='lastName' label='Last'/>
      <FormObject name='address' labelPrefix='Address '>
        <Input formField='line1' label='Line 1'/>
      </FormObject>
      <input type='submit' value='Submit' onClick={this.handleSubmit}/>
    </Form>
  );
}
```

a more flexible approach that facilitates dynamic forms:

```jsx
constructor(props) {
  super(props);
  this.formState = new FormState(this);
  this.state = this.formState.createUnitOfWork().injectModel(this.props.model);
  
  this.handleSubmit = this.handleSubmit.bind(this);
}

render() {
  return (
    <Form formState={this.formState}>
      <Input formField='firstName' label='First'/>
      <Input formField='lastName' label='Last'/>
      <FormObject name='address' labelPrefix='Address '>
        <Input formField='line1' label='Line 1'/>
      </FormObject>
      <input type='submit' value='Submit' onClick={this.handleSubmit}/>
    </Form>
  );
}
```

#### Note

do not confuse the use of defaultValue as a property name. react-formstate uses [controlled components](https://facebook.github.io/react/docs/forms.html#controlled-components)
{'fraction_non_alphanumeric': 0.16482628602208457, 'fraction_numerical': 0.0032318879612173446, 'mean_word_length': 4.073770491803279, 'pattern_counts': {'":': 0, '<': 46, '<?xml version=': 0, '>': 46, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2605043', 'n_tokens_mistral': 1212, 'n_tokens_neox': 1174, 'n_words': 250}