React Child Component does not update properties passed from Parent Component

Question

I have a parent component and a child component as function components in react.

const Parent = () => {

    const selectedProduct = 0;
    //const [servicesList, setServicesList] = useState<IService[]>([]);
    var servicesList = [] as IService[];
    var operationalProcessSelector = [] as IOperationalProcessSelector[];


    useEffect(()=>{
        fetchServicesList(840);
    }, []);

    const fetchServicesList = async (quotationId: number) => {

        const SERVICE_LIST_API_URL = `API URL...`;
        
        await axios.get(SERVICE_LIST_API_URL, {headers:API_REQ_HEADERS})
            .then((response:any)=>{

                if(response && response.data && response.data.length > 0 && response.data[0]){
                    
                    let product = response.data[selectedProduct];
                    let operationalProcesses = product.OperationalProcess;

                    updateServiceList(operationalProcesses);

                }

            });

    };

    const updateServiceList = (operationalProcesses: any) => {

        operationalProcesses.forEach((operationalProcessItem: any)=>{
            operationalProcessItem.Services.forEach((serviceItem: any) => {
                serviceItem.LineEditState = 'edit';
                serviceItem.ShowContent = true;
            });
        });

        const flattenedArray: IService[] = operationalProcesses.reduce(
                (accumulator: IService[], value: any) => accumulator.concat(value.Services), 
                [] as IService[]);

        //servicesList(flattenedArray);
        servicesList = flattenedArray;
        console.log('Update Services', servicesList); // It retrieves and outputs data here
    };



    return <ServiceGrid OperationalProcessSelector={operationalProcessSelector} />
}

export default Parent

Answer 1

you should pass props.ServicesList to useEffect dependency array.

useEffect(()=>{
        setTableData(props.ServicesList);
        // setOperationalProcessSelector(props.OperationalProcessSelector);
        console.log('component', props.ServicesList);
    }, [props.ServicesList]);