How to re fetch the values from child to parent using the hooks.

Using the below code we re fetch the values from child to parent without refreshing we can call the data again in the use effect

import React, { useState, useEffect } from 'react';
import Weekentry from './Weekentry'; // Import your Weekentry component


const ProjectTable = ({ previousWeekDates, datesArray, selectedProjects, user }) => {
  const [weekDates, setWeekDates] = useState([]);
  const [refreshWeekentry, setRefreshWeekentry] = useState(false);


  // Function to fetch week dates from the API
  const fetchWeekDates = async () => {
    try {
      const queryString = datesArray.join(',');
      console.log('Test-Rohit queryString', queryString);
      const response = await fetch(`${GRAPHQL_API_URL}/api/timegrid?where[weekDates][equals]=${queryString}&where[employeeid][equals]=${user.internalid}`);
      const data = await response.json();
      if (data.docs.length > 0) {
        const commonWeekDates = data.docs[0].weekDates.split(',').map(parseDate);
        setWeekDates(commonWeekDates);
      }
      return data.docs;
    } catch (error) {
      console.error('Error fetching week dates:', error);
      return [];
    }
  };


  useEffect(() => {
    fetchWeekDates();
  }, [datesArray]); // Run the fetch whenever datesArray changes


  return (
    <div>
      <Weekentry
        key={refreshWeekentry ? 'refresh' : 'normal'}
        previousWeekDates={previousWeekDates}
        datesArray={datesArray}
        selectedProjects={selectedProjects}
        weekDates={weekDates} // Pass the fetched data as a prop
      />
    </div>
  );
};


export default ProjectTable;

Weekentry Component
jsx
Copy code
import React from 'react';

const Weekentry = ({ previousWeekDates, datesArray, selectedProjects, weekDates }) => {
  // Now you can use weekDates prop in your Weekentry component
  return (
    <div>
      {/* Your component logic here */}
      <div>Week Dates: {weekDates.join(', ')}</div>
    </div>
  );
};

export default Weekentry;