I am new to React. I have a question about how to force the page to render through a popup.

Now I wrote my page in a function component. And it has a popup window that could change the text on the page. However, the update will first go to the backend database and does not show on the page after submitting the popup form.

I know we can use windows.location.reload to reload the whole page. But I would like to know how I can re-render the function component instead of reloading the whole page.

Thank you so much!

Edit: This is a part of the code from the main page. values and setValues are created by [values, setValues] = useState({name: "", birthDate: ""});.

      <PopUpEdit 
        values={values}
        setValues = {setValues}
        trigger={buttonPopUpEdit} 
        setTrigger={setButtonPopUpEdit}
        >
          Edit
      </PopUpEdit> 

In the popup form,

const onSubmit = async(event)=>{
    event.preventDefault();
    props.setValues(event.target.value);
    props.setTrigger(undefined);
}

Both the main page and the popup form are function components. Thank you!