I am creating a functional component called EmptyZoo.
   const EmptyZoo = () => {
    /* Here i created onSubmit function
    function onSubmit(event) {
        event.preventDefault();
        // calling the API by Axios.
        let response = () => {
          Axios.post("http://localhost:8081/zoo/save", {
            name: inputValues.name,
            address1: inputValues.address1,
            country: locations.country,
          })
      }

// here i have created modal part return ( // Here when i click the button below the modal opens Add Zoo // Modal part // Modal Header <Modal.Header closeButton> <Modal.Title>Modal heading</Modal.Title> </Modal.Header> // Modal Body <Modal.Body> Name: <input type="text" name="name" id="user" className="form-control" required placeholder={t("Name")} value={inputValues.name} onChange={handleChange} /> // Country Country: Select: Country {locations.map((location) => ( {location.country} ))} </Modal.Body> // Footer element <Modal.Footer> Close Submit </Modal.Footer> // this is my end of the code