title: Passing data-id to bootstrap modal WITHOUT jquery
body: <p>I've seen many questions like this with the exact same solution to use Jquery. But I don't want to use Jquery on my Reactjs just to passing id to modal.</p>
  
  <p>Here's my code :</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- trigger to pop up modal --&gt;
  &lt;button
            type="button"
            className="btn btn-sm btn-danger float-right"
            data-toggle="modal"
            data-target="#educationModalCenter"
            data-id={education._id} &lt;!-- Here im trying to pass the ID --&gt;
          &gt;
            &amp;times;
          &lt;/button&gt;
  
  &lt;!-- Modals --&gt;
  &lt;div
          className="modal fade"
          id="educationModalCenter"
          tabindex="-1"
          role="dialog"
          aria-labelledby="exampleModalCenterTitle"
          aria-hidden="true"
        &gt;
          &lt;div className="modal-dialog modal-dialog-centered" role="document"&gt;
            &lt;div className="modal-content"&gt;
              &lt;div className="modal-header"&gt;
                &lt;h5
                  className="modal-title font-weight-bold"
                  id="exampleModalLongTitle"
                &gt;
                  Delete Education
                &lt;/h5&gt;
                &lt;button
                  type="button"
                  className="close"
                  data-dismiss="modal"
                  aria-label="Close"
                &gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div className="modal-body"&gt;
                Are you sure to delete this education? This cannot be undone.
              &lt;/div&gt;
              &lt;div className="modal-footer"&gt;
                &lt;button
                  type="button"
                  className="btn btn-primary"
                  onClick={() =&gt; onClickDelete(education._id, pid)}
                  data-dismiss="modal"
                &gt;
                  Sure
                &lt;/button&gt;
                &lt;button
                  type="button"
                  className="btn btn-secondary"
                  data-dismiss="modal"
                &gt;
                  Close
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Every time button 'Sure' was clicked, it would take the first modal instead to delete. Is there any way to accomplish this WITHOUT using jquery?</p>
  
  <p>thankyou for your help!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've tried the solution below but it didn't work. Here's what I've done :</p>
  
  <pre><code>// set id
  const [id, setId] = useState(null)
  
  const ngesetID = e =&gt; {
      e.preventDefault()
  
      let dataId = e.target.dataset["id"] || e.target.getAttribute("data.id")
      console.log("ini ada kaga")
      console.log(dataId) // it changes to current ID
  
      setId(dataId)
    }
  
  useEffect(() =&gt; {
      console.log("ID terbaru")
      console.log(id) // Just to make sure and it really changed
    }, [id])
  
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- trigger to pop up modal --&gt;
  &lt;button
            type="button"
            className="btn btn-sm btn-danger float-right"
            data-toggle="modal"
            data-target="#educationModalCenter"
            data-id={education._id} &lt;!-- Here im trying to pass the ID --&gt;
            onClick={e =&gt; ngesetID(e)}
          &gt;
            &amp;times;
          &lt;/button&gt;
  </code></pre>
  
  <p>But every time I hit the button from pop-up modal, it always pointing to the first modal.</p>
  
  <pre><code>&lt;button
         type="button"
         className="btn btn-primary"
         // onClick={() =&gt; onClickDelete(education._id, pid)}
         onClick={e =&gt; cobaDoang(e, id)} // the 'id' revert back to the first ID modal
         data-dismiss="modal"
      &gt;
       Sure
  &lt;/button&gt;
  </code></pre>
  
  <p>I'm not sure what did I do wrong?</p>