title: Passing data to Reactstrap modal
body: <p>I have some categories in my application. For each category, I'd like to add some images. So I added one Modal in reactstrap to show a modal window to add some files and descriptions. So far everything is Good. But the problem comes when I click on the launch modal button (add the file here), I'm unable to pass the id to the Modal. I tried to set a value to a variable using the useState hook but it will get a value only after the modal is closed.</p>
  <p>My initials states like</p>
  <pre><code>const [categories, setCategories] = useState([])
  const [categoryId, setCategoryId] = useState()
  const [modal, setModal] = useState(false)
  
  const toggle = (id) =&gt; {
      setCategoryId(id)
      setModal(!modal);
  }
  </code></pre>
  <p>Then my code for showing categories</p>
  <pre><code>{ categories.map( cat =&gt; (
      &lt;div className=&quot;card border-0 rounded-0 img-thumbnail&quot;&gt;
          &lt;img src={'assets/images/image_upload.jpg'} value={t._id} className=&quot;img-thumbnail&quot; onClick={()=&gt;toggle(cat._id)} alt=&quot;...&quot;/&gt;
      &lt;/div&gt;               
  )) }
  
  &lt;Modal 
      isOpen={modal} 
      toggle={toggle} 
      centered={true}
  &gt;
      &lt;ModalBody&gt;
          &lt;div className=&quot;p-2&quot;&gt;
              &lt;form&gt;
                  &lt;div className=&quot;form-group&quot;&gt;
                      &lt;input type=&quot;file&quot; className=&quot;form-control-file&quot; id=&quot;exampleFormControlFile1&quot;/&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-group&quot;&gt;
                      &lt;input type=&quot;text&quot; className=&quot;form-control&quot; id=&quot;exampleInputPassword1&quot; placeholder=&quot;Caption Title&quot;/&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-group&quot;&gt;
                      &lt;textarea className=&quot;form-control&quot; placeholder=&quot;Description&quot; id=&quot;exampleFormControlTextarea1&quot; rows=&quot;3&quot;&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;button type=&quot;submit&quot; className=&quot;btn btn-form&quot;&gt;Upload&lt;/button&gt;
                  &lt;span onClick={toggle} style={{cursor: 'pointer'}} className=&quot;ml-2 btn btn-form-outline&quot;&gt;Cancel&lt;/span&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/ModalBody&gt;
  &lt;/Modal&gt;
  </code></pre>
  <p>I'm getting the category id only after the modal is closed. How can I set the value along with modal window????</p>