title: How to get data from async request in reactjs and add it to React-bootstrap Modal
body: <p>How to add React-bootstrap Modal when website open for the every time, model should always pop up in center with the details and with option of close  the model.
  I am getting the data from a async request Now if in my json data if "show" is true then only display the "data" from the json to the p tag tried this approach but it fails on close buton</p>
  
  <p>i tried this approach bit it fails throws error </p>
  
  <pre><code> const handleClosed = () =&gt; setItems(items.map(item =&gt; {return item.show = false}));
  TypeError: items.map is not a function
  </code></pre>
  
  <pre><code>const Modals = (props) =&gt; {
  
      useEffect(() =&gt; {
        fetchItems();
      },[])
  
      const [items, setItems] = useState([]);
  
      const fetchItems = async () =&gt; {
        const data = await fetch("url");
        const item = await data.json();
        setItems(item);
      }
  
      const handleClosed = () =&gt; setItems(items.map(item =&gt; {return item.show = false}));
  
      return (
        &lt;div&gt;
  
         &lt;Modal
            show={items.show}
            onHide={handleClosed}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
          &gt;
            &lt;Modal.Header closeButton&gt;
                &lt;Modal.Title id="contained-modal-title-vcenter"&gt;
                   &lt;b&gt;Public Notice&lt;/b&gt; 
        &lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Modal.Body&gt;
                &lt;p&gt;
                {items.show}
                &lt;/p&gt;
            &lt;/Modal.Body&gt;
            &lt;Modal.Footer&gt;
                &lt;Button onClick={handleClosed}&gt;Close&lt;/Button&gt;
            &lt;/Modal.Footer&gt;
        &lt;/Modal&gt;
  
       &lt;/div&gt;
      );
    };
  
    export default Modals;
  
  </code></pre>