title: How to open just only the modal which is clicked
body: <p>I'm using React and Firebase to make CRUD website.</p>
  <p>I made a table using reactstrap and try to use modal for showing contents of each table cell.</p>
  <p>However, I ran into a error that opening every table cell's modals just by clicking one.</p>
  <p><a href="https://i.stack.imgur.com/4DWUx.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>If you look into a image above you can check there are several table cells. Once I click just one it goes like following image. Opening every single modals.</p>
  <p><a href="https://i.stack.imgur.com/bTAHD.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>I will put my code only about those modal part.</p>
  <p>...</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  const [modal, setModal] = useState(false);
    const toggle = () =&gt; setModal(!modal);
    
    ...
    
  &lt;td&gt;
    &lt;Button color="primary" onClick={toggle}&gt;내용 보기&lt;/Button&gt;
      &lt;Modal isOpen={modal} modalTransition={{ timeout: 700 }} backdropTransition={{ timeout: 1300 }} toggle={toggle}&gt;
        &lt;ModalHeader toggle={toggle}&gt;{value.name}&lt;/ModalHeader&gt;
          &lt;ModalBody&gt;
            {value.description}
          &lt;/ModalBody&gt;
      &lt;/Modal&gt;
  &lt;/td&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I think I should use {value.id} for showing only modal I clicked because it has to be specific. So I tried few changes but it didn't work.</p>