title: React/Redux pre populating a form on a click
body: <p>I'm trying to pre populate my form after clicking a button in my <code>Item</code> I have the actions to be able to update the item, the issue is being able to pre-populate the form with the correct item to be able to dispatch that action. </p>
  
  <pre><code>-----------------
  | + List        | &lt;&lt; Name of the list
  -----------------
  | SKU: 12345    | &lt;&lt; Item
  | ITEM: Bananas |
  | PRICE: $1.00  |
  |               |
  | &lt;edit&gt;        | &lt;&lt; Button triggering the modal and form. Need to pre-populate the form onClick
  -----------------
  </code></pre>
  
  <p>/components/List.jsx</p>
  
  <pre class="lang-js prettyprint-override"><code>export class List extends React.Component {
    constructor(props) {
      super(props)
  
      this.state = {
        isModalOpen: false
      }
    }
  
    toggleModal () {
      this.setState({ isModalOpen: !this.state.isModalOpen })
    }
  
   ...
  
    render () {
      const { list, ...props } = this.props
      const listId = list.id
  
      return (
        ...
  
          &lt;Items 
            items={props.listItems}
            openModal={this.toggleModal.bind(this)}&gt;
          &lt;/Items&gt;
  
          &lt;Modal 
            className='list-add-item'
            openModal={this.state.isModalOpen}&gt;
            &lt;ItemForm 
              itemActions={this.props.itemActions} 
              listActions={this.props.listActions} 
              listId={listId}&gt;
            &lt;/ItemForm&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>/components/ItemForm.jsx</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import uuid from 'node-uuid'
  
  class ItemForm extends React.Component {
    constructor(props) {
      super(props)
  
      this.state = {
        isEditing: false
      }
    }
  
    handleSubmit = (event) =&gt; {
      event.preventDefault()
  
      let sku = this.refs.sku.value.trim()
      let text = this.refs.text.value.trim()
      let price = this.refs.price.value.trim()
  
      const item = { id: uuid.v4(), sku, text, price }
  
      // don't do anything if any field is left blank
      if (!item.sku || !item.text || !item.price) { return }
  
      this.props.itemActions.createItem(item)
      this.props.listActions.connectToList(this.props.listId, item.id)
      // reset the form after submission
      this.refs.itemForm.reset()
    }
  
    render() {
      const { ...props } = this.props
  
      return (
        &lt;form ref="itemForm" onSubmit={this.handleSubmit}&gt;
            &lt;label&gt;SKU&lt;/label&gt;
            &lt;input 
              type="text" 
              placeholder="SKU" 
              autoFocus={true}
              ref='sku'
              defaultValue={this.props.sku}
              onBlur={this.finishEdit}
              onKeyPress={this.checkEnter}&gt;&lt;/input&gt;
  
            &lt;label&gt;Item&lt;/label&gt;
            &lt;input 
              type="text"
              placeholder="Item" 
              autoFocus={true}
              ref='text'
              defaultValue={this.props.text}
              onBlur={this.finishEdit}
              onKeyPress={this.checkEnter}&gt;&lt;/input&gt;
  
            &lt;label&gt;Price&lt;/label&gt;
            &lt;input 
              type="text"
              placeholder="Price"
              autoFocus={true}
              ref='price'
              defaultValue={this.props.price}
              onBlur={this.finishEdit}
              onKeyPress={this.checkEnter}&gt;&lt;/input&gt;
  
          &lt;button type="submit"&gt;{ this.state.isEditing ? 'Edit Item' : 'Add Item' }&lt;/button&gt;
        &lt;/form&gt;
      )
    }
  }
  
  export default ItemForm
  </code></pre>
  
  <p>/components/Items.jsx</p>
  
  <pre class="lang-js prettyprint-override"><code>export default class Items extends React.Component {
    render () {
      const {items, onEdit, ...props} = this.props
  
      return (
        &lt;ul className='items'&gt;{items.map((item) =&gt;
          &lt;Item
            className='item'
            key={item.id}
            id={item.id}
            sku={item.sku}
            text={item.text}
            price={item.price}
            openModal={this.props.openModal}&gt;
          &lt;/Item&gt;
        )}&lt;/ul&gt;
      )
    }
  }
  </code></pre>
  
  <p>/components/Item.jsx</p>
  
  <pre class="lang-js prettyprint-override"><code>export default class Item extends React.Component {
    render () {
      const { openModal, ...props } = this.props
  
      return (
        &lt;span&gt;
          &lt;li&gt;SKU: {this.props.sku}&lt;/li&gt;  
          &lt;li&gt;ITEM: {this.props.text}&lt;/li&gt;
          &lt;li&gt;PRICE: {this.props.price}&lt;/li&gt;
          &lt;button onClick={this.props.openModal}&gt;Edit Item&lt;/button&gt;
        &lt;/span&gt;
      )
    }
  }
  </code></pre>