title: How to display Content in Modal in reactjs?
body: <p>I want to show <code>data</code> details in Modals one after another</p>
  <p>such that it should display first object details and on click of next it should display the next object details from array <code>data</code> and continue the same process in same way till it reaches the end of he object .</p>
  <p>For current scenario i inserted three object but in real-time it can be length of any object length can be any inside of array</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import { Modal, Button } from &quot;react-bootstrap&quot;;
  
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  
  const data = [
    {
      Name: &quot;COOL&quot;,
      title: &quot;SuperCOOL&quot;,
      id: 1
    },
    {
      Name: &quot;DEMON&quot;,
      title: &quot;SuperDEMON&quot;,
      id: 2
    },
    {
      Name: &quot;SPIDER&quot;,
      title: &quot;SuperSPIDER&quot;,
      id: 3
    },
    {
      Name: &quot;SUPER&quot;,
      title: &quot;SuperSUPER&quot;,
      id: 4
    }
  ];
  
  export default function App() {
    const [modalShowing, setModalShowing] = React.useState(false);
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Button onClick={() =&gt; setModalShowing(true)}&gt;Show&lt;/Button&gt;
        &lt;Modal
          show={modalShowing}
          onHide={() =&gt; setModalShowing(false)}
          size=&quot;lg&quot;
          aria-labelledby=&quot;contained-modal-title-vcenter&quot;
          centered
        &gt;
          &lt;Modal.Header closeButton&gt;
            &lt;Modal.Title id=&quot;contained-modal-title-vcenter&quot;&gt;
              &lt;p&gt;Details&lt;/p&gt;
            &lt;/Modal.Title&gt;
          &lt;/Modal.Header&gt;
          &lt;Modal.Body&gt;
            &lt;div&gt;hi&lt;/div&gt;
            &lt;Button&gt;Next&lt;/Button&gt;
          &lt;/Modal.Body&gt;
        &lt;/Modal&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>