0

I'm quite new to Web Dev and I'm making a management system app in react. I have a React bootstrap Form that the user can use to edit the details of an entry in a Modal. However, the way things are set up, I can't use the Form Submit event to reload the page after the entry has been changed because the buttons in the Modal need to be in a Form component to use the Form Submit an event. If I were to put the buttons in a Form component in the Modal Footer then it messes with the bootstrap stylings.

Is it a bad thing to just use window.location.reload() in my own onClick event to reload the page after editing?

my handleDetailsChange function will change the details and hide the modal (showing an updated form with all users)

is it bad to call window.location.reload() like this?

const EditRecordComp = (props) => {

  //gets the user details from the context and allows for it to be changed

  const userDetails = useContext(UserDetailsContext)
  //holding the new details in state
  const [newUserName, setNewUserName] = useState(userDetails.Name);
  const [newUserAddress, setNewUserAddress] = useState(userDetails.Address);


  const handleDetailsChange = () => {
    console.log("updating...")
    //updates the record in the server
    Axios.put('http://localhost:3001/updateuser', { newName: newUserName, newAddress: newUserAddress, IDRecord: userDetails.idBillingList })
      .then((response) => {
        console.log("updated client side")
      })
      .catch(error => {
        console.log(error.response)
      })
      .then(() => {
        //closes modal after
        props.handleEditClose();
        window.location.reload();
      });
  }

  return (

    <Modal show={props.showModal}>

      <Modal.Header closeButton>
        <Modal.Title>Edit User Details</Modal.Title>
      </Modal.Header>

      <Modal.Body>
        <Form>
          <Form.Group className="mb-3" controlId="formBasicEmail">
            <Form.Label>Name</Form.Label>
            <Form.Control
              type="email"
              placeholder={newUserName}
              value={newUserName}
              onChange={(e) => setNewUserName(e.target.value)} />
          </Form.Group>

          <Form.Group className="mb-3" controlId="formBasicText">
            <Form.Label>Address</Form.Label>
            <Form.Control
              type="text"
              placeholder={newUserAddress}
              value={newUserAddress}
              onChange={(e) => setNewUserAddress(e.target.value)} />
          </Form.Group>
        </Form>
      </Modal.Body>

      <Modal.Footer>
        <Button variant="secondary" onClick={props.handleEditClose}>
          Close
        </Button>
        <Button variant="primary" type="submit" onClick={handleDetailsChange}>
          Save Changes
        </Button>
      </Modal.Footer>
    </Modal>
DreamBold
  • 2,727
  • 1
  • 9
  • 24
Myles Louw
  • 33
  • 3
  • Yes it's bad to use `window.location.reload()` in a React app! You are forcing the user to reload your whole app! You should use `state` variables to keep track of what the user is doing. – Kokodoko Dec 26 '22 at 16:37
  • My component structure in the app is Currently... App -> Page Name (this gets the call for all users and shows it in a table)-> Each Table entry -> EditRecordComp. How would i update the Users list state in the Page Name component? – Myles Louw Dec 26 '22 at 17:00
  • Your parent Component (App) could keep track of the state, and pass it to each child component. The parent could render a different child component (for example a login window) if the `loggedIn` state is true or false. – Kokodoko Dec 26 '22 at 17:55
  • not quite what i had in mind, but i managed to get it sorted. I ended up having a Context in App and then when i change the state it reloads. Thank you for the info on what NOT to do with reloading, I really appreciate it – Myles Louw Dec 27 '22 at 12:18
  • Context is also a good way to keep the state across several components. But you shouldn't have to reload at all :) Just use conditional rendering like this: https://reactjs.org/docs/conditional-rendering.html – Kokodoko Dec 27 '22 at 13:55

0 Answers0