title: Components not disappearing even though they are deleted
body: <p>I have a class Options, that have several Values per option. When I add a value, a new component is rendered that allows the user to input a value. The user can also delete a value. When a user deletes a value in the order it was made (most recent first), the values disappear just fine. However, if the user deletes a value not in the order (which I want to be possible), the array in state from which the components are made is successfully modified, but the most recently added component goes away rather than the one that was clicked. </p>
  
  <p>I've tried changing the filter function to a map function, and then manually removing and modifying the length of the array, but nothing seems to do the trick.</p>
  
  <pre><code>deleteValue = valueId =&gt; {
      let values = this.state.values
      values = values.filter(value =&gt; {
        return value.id != valueId
      })
      this.setState({ values: values })
    }
  
    addValue = () =&gt; {
      let values = []
      if (this.state.values) {
        values = this.state.values
      }
      let newValue = {
        id: Math.round(Math.random() * 10000),
        name: '',
        price: 0,
        availability: true,
        type: 'POST'
      }
      this.props.rootReducer.patchItem.addValueToOption(
        this.state.id,
        newValue.id,
        '',
        newValue.price,
        newValue.availability,
        'POST'
      )
      values.push(newValue)
      this.setState({ values: values, isLoading: false })
    }
  
    render () {
      if (this.state.isLoading &amp;&amp; this.state.type == 'POST') {
        this.addValue()
        return &lt;ActivityIndicator /&gt;
      } else if (this.state.isLoading &amp;&amp; this.state.type == 'PATCH') {
        this.getMenuItemOptionValuesFromApiAsync()
        return &lt;ActivityIndicator /&gt;
      } else {
        let values = this.state.values.map((val, key) =&gt; {
          return (
            &lt;EditMenuItemOptionValuesModal
              onRef={ref =&gt; (this.parentReference = ref)}
              parentReference={this.deleteValue.bind(this)}
              key={key}
              itemOptionId={this.props.id}
              id={val.id}
              name={val.name}
              price={val.price}
              availability={val.availability}
              type={val.type}
            /&gt;
          )
        })
  </code></pre>
  
  <p>So if I have an array [id: 1, id: 2, id: 3]
  and components are rendered for all three, and then I click delete on 1, the values array becomes: 
  [id: 2, id: 3] but the components that are rendered are still [id: 1, id: 2] even though the values.map is giving the right values.</p>