score:3

Accepted answer

As @rdr20 suggested: Try listening for changes on contact in <ContactForm /> with the useEffect() hook.

const ContactForm = ({ contact, onSubmit }) => {
    const [formData, setFormData] = React.useState(contact); // this runs only once, when the component is mounted, not when i.e. contact updates.
    
    useEffect(() => {
        setFormData(contact);
        }, [contact]) // now this listens to changes in contact

    return (
        <>
        ... whole form body
        </>
    )
}

export default ContactForm;

Related Query

More Query from same tag