Functional Component in React is not updating on props change

Question

I am new to react and I have created one listContactComp which shows the list and it has edit button to that specific element. On the click on edit button I am calling editContactComp which is taking id as prop and fetching the specific contact data.

It gets fetched but not updated in the form.

Here is the code for editContactComp.js

import React from 'react'
import { useRouteMatch} from "react-router-dom";
import ContactForm from "./ContactForm";

const EditContact = () => {
    const stateData = useRouteMatch();
    const contactId = stateData.params.contactId;
    console.log("insurer -> ", contactId);  //  gets printed
    const defContactData = {
        name: "",
        email: "",
        phone: "",
        status: false,
        address: ""
    }

    const [formDataUpdate, setContactData] = React.useState(defContactData);

    React.useEffect(() => {
        const fetchContact = async () => {
            const response = await fetch(`http://localhost:3008/fetchContact?id=${contactId}`);
            const contacts = await response.json();
            console.log("contact data ", contacts.data[0]);    // data is coming in array, oneElement
            setContactData(contacts.data[0]);
        }
        fetchContact();
    }, [contactId])

    const updateInsurer = async (contactData) => {
        console.log("edit contact");
        // update logic
    }

    return (
        <>
            <ContactForm contact={formDataUpdate} onSubmit={updateInsurer} />
        </>
    )
}

export default EditContact;

And contact form is :

const ContactForm = ({ contact, onSubmit }) => {
    console.log("from props ", contact);    // whole data is printed here
    const [formData, setFormData] = React.useState(contact);
    console.log("insurer form values", formData);   // only default data is printed here and shown in form

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

export default ContactForm;

You have to use useEffect() again in ContactForm to get your data. — rdr20, Mar 18 '21 at 09:14

four-eyes · Accepted Answer · 2021-03-18T12:45:49.467

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;

Functional Component in React is not updating on props change

1 Answers1