title: How to make input field editable on toggle with redux based on toggle?
body: <p>Problem is that I want use <strong>Redux</strong> and based on the <strong>edit toggle</strong> (<code>product.editable</code>) it should be checked if the text are editable. </p>
  
  <p>But everything goes well until it reaches the point that I want to edit the value that is inside the input field. </p>
  
  <p>I need someone who could help me to the right direction. I know the JSON cannot be modified directly, but how can I change the current value and then make it editable inside the input field. Keep in mind I am using dumb components. </p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>let getProductList = productList.map((product, i) =&gt; {
    return (
      &lt;div key={i}&gt;   
        {product.editable ?   
          &lt;div&gt;
            &lt;input name="title" ref={(input) =&gt; title = input} value={product.title}/&gt;
            &lt;input name="description" ref={(input) =&gt; description = input} value={product.description}/&gt;
          &lt;/div&gt;
        : 
          &lt;div&gt;
            &lt;div&gt;{product.title}&lt;/div&gt;
            &lt;div&gt;{product.description}&lt;/div&gt;
        &lt;/div&gt;}
        &lt;ProductButtons productId={product._id} index={i}/&gt;
      &lt;/div&gt;
    ) 
  });
  
  export const ProductButtons = ({ productId, index}) =&gt; {
    const dispatch = useDispatch();
    return (
      &lt;div&gt;
        &lt;button onClick={() =&gt; dispatch(deleteItem(productId, index))}&gt;Delete&lt;/button&gt;
        &lt;button onClick={() =&gt; dispatch(editItem(productId, index))}&gt;Edit&lt;/button&gt;
        &lt;button onClick={() =&gt; dispatch(addItem(productId))}&gt;Add&lt;/button&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p><strong>Reducer:</strong></p>
  
  <pre><code>case types.UPDATE_PRODUCT: {
    console.log('update')
    return {
      ...state,
      products: state.products.map((product, i) =&gt;
        i == action.index
          ? {
              ...product,
              editable: product.editable == true ? false : true,
            }
          : product
      ),
    }
  }
  </code></pre>