title: React/redux + bootstrap, make modal show unique for component
body: <p>I have a component that shows a modal to pop up some content in my map. I have a pretty straight forward set up :</p>
  
  <p>The JSX looks like this :</p>
  
  <pre><code>  &lt;Modal show={this.props.results.showPreviewModal} &gt;
           {myPreviewContent}
    &lt;/Modal&gt;
  </code></pre>
  
  <p>2 action-creators to open, close, and set the current item :</p>
  
  <pre><code>export function previewAsset(result) {
      return {
          currentResult: result,
          type: actions.PREVIEW_ASSET
      };
  }
  
  export function closePreviewModal() {
      return {
           type: actions.CLOSE_PREVIEW_MODAL
      };
  }
  </code></pre>
  
  <p>And their reducers : </p>
  
  <pre><code>case actions.PREVIEW_ASSET:
        return state.set('currentPreview', action.currentResult).set('showPreviewModal', true);
  
  case actions.CLOSE_PREVIEW_MODAL:
        return state.set('showPreviewModal', false);
  </code></pre>
  
  <p>Now, this seems to work fine. However, the issue is that the component that has the modal inside of it is inside a map, as it is a singular search result (each result component has a some functionality so it is it's own component that is mapped over with results). The issue is that if I have 10 results, this modal opens 10 times when I click the button that fires the <code>previewAsset</code> action. </p>
  
  <p>This makes sense, because the <code>showPreviewModal</code> is accessible by all components, but what I am wondering is if there is a way to make then unique for each component individually, so only the 1 modal opens, not all 10.  Unsure how to approach this within react/redux, would very much appreciate any advice, thanks!</p>