How to get data from async request in reactjs and add it to React-bootstrap Modal

Question

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

i tried this approach bit it fails throws error

 const handleClosed = () => setItems(items.map(item => {return item.show = false}));
TypeError: items.map is not a function

const Modals = (props) => {

    useEffect(() => {
      fetchItems();
    },[])

    const [items, setItems] = useState([]);

    const fetchItems = async () => {
      const data = await fetch("url");
      const item = await data.json();
      setItems(item);
    }

    const handleClosed = () => setItems(items.map(item => {return item.show = false}));

    return (
      <div>

       <Modal
          show={items.show}
          onHide={handleClosed}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        >
          <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                 <b>Public Notice</b> 
      </Modal.Title>
          </Modal.Header>
          <Modal.Body>
              <p>
              {items.show}
              </p>
          </Modal.Body>
          <Modal.Footer>
              <Button onClick={handleClosed}>Close</Button>
          </Modal.Footer>
      </Modal>

     </div>
    );
  };

  export default Modals;

Answer 1

Init items with [] will fix the error:

const [items, setItems] = useState([]);

Answer 2

You will be not able to use map on the items. items object return from the fetch API is not an array.

You could initialize the items to an object.

 const [items, setItems] = useState({});

You could use directly items.show and items.data.

Answer 3

I just solved it by

const Modals = (props) => {

    useEffect(() => {
      fetchItems();
    },[])

    const [items, setItems] = useState([]);

    const fetchItems = async () => {
      const data = await fetch("url");
      const item = await data.json();
      setItems(item);
    }

    const handleClosed = () => setItems(items.show = false}));

    return (
      <div>

       <Modal
          show={items.show}
          onHide={handleClosed}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        >
          <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                 <b>Public Notice</b> 
      </Modal.Title>
          </Modal.Header>
          <Modal.Body>
              <p>
              {items.show}
              </p>
          </Modal.Body>
          <Modal.Footer>
              <Button onClick={handleClosed}>Close</Button>
          </Modal.Footer>
      </Modal>

     </div>
    );
  };

  export default Modals;