React page refresh when submit while I have a confirmation popup. It means the popup shows up and di-CodePudding

I have a react form and a submit button in the end, when you submit it's supposed to have a popup dialog to inform you that your message is sent but the pages get refreshed fast and the dialog disappears. Below is my code

import * as React from 'react';
import './App.css';
import StarRating from './StarRating';
import StarRating2 from './StarRating2';
import StarRating3 from './StarRating3';
import { TextArea } from 'semantic-ui-react';
import AlertDialogSlide from './confirmation';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import Slide from '@mui/material/Slide';
import Button from '@mui/material/Button';
import { useState } from "react";


const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});


function App() {
 const [open, setOpen] = React.useState(false);

const [comment, setComment] = useState("");
const [rating1, setRating1] = useState("");

const handleClickOpen = () => {
setOpen(true);
};

const handleClose = () => {
setOpen(false);
};

const onSubmitForm = async e => {
e.preventDefault();
try {
  const body = {  rating1, comment };
  const response = await fetch("http://localhost:5000/feedback", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body)
  });

  window.location = "/";
} catch (err) {
  console.error(err.message);
}

};


return (

<form onSubmit={onSubmitForm} >

<div className="App">
 <img src='solavievelogo.png'></img>
  <hr/>
  <h2>Leave a feedback!</h2>
 <StarRating value={rating1} updateRating={(e) => setRating1(e)}
  onChange={e => setRating1(e.target.value)}></StarRating>
 <hr2/>
 <StarRating2></StarRating2>
 <hr2/>
 <StarRating3></StarRating3>
 <hr2/>

 <p>Please leave a comment about your experience below:</p>
 <TextArea  placeholder=' Type your comment here...' 
  value={comment}
  onChange={e => setComment(e.target.value)}
  ></TextArea>
 <br/>
 <button  type='submit'  variant="outlined" onClick={handleClickOpen}><span 
 >SEND FEEDBACK</span> </button>
 <Dialog
    open={open}
    TransitionComponent={Transition}
    keepMounted
    onClose={handleClose}
    aria-describedby="alert-dialog-slide-description"
  >
    <DialogContent>
    <img src='confirm.png'></img>
      <DialogContentText id="alert-dialog-slide-description">
      <p>Thank you for your message!</p>
      <p> We will be in contact soon..</p>
      </DialogContentText>
    </DialogContent>
    <DialogActions >
    <button  type='submit'  onClick={handleClose} ><span >Close</span> </button>
    </DialogActions>
  </Dialog>
</div>

</form>

 );
}

export default App;

When I click submit the popup dialog shows but the page refresh very fast while I want that dialog to stay because the user have to confirm. Any ideas how to solve it ?

CodePudding user response：

you can set window location on handle close function

const handleClose = () => {
 setOpen(false);
 window.location = "/";
};

So that it will only go to that route when the handle is closed

CodePudding user response：

For this one, you can make it type="button" instead of submit

<button  type='submit'  variant="outlined" onClick={handleClickOpen}><span 
 >SEND FEEDBACK</span> </button>

CodePudding user response：

I would suggest removing handleClickOpen from the button. And then call setOpen(true) inside onSubmitForm

CodePudding user response：

In the confirmation popup code You need to change button type='submit' to type="button" or Change handleClose to like this

const handleClose = (e) => {
  e.preventDefault();
  setOpen(false);
  };

CodePudding user response：

First you can remove the click handler on button (type="submit"), and push the place the handleClickOpen() inside submit and after the api call success. As I understand from your snippet, you are trying to display the popup message once you sent request. Ideally place the handleClickOpen() after getting response from api call.