React : parent props changes, but children (with map) update one step behind-CodePudding

I pass a prop data wich contain a field worktypeData wich has a field that changes. When I console log I can see data updated, but the console log in the map is one step behind late.

I tried with a useEffect that set a new state with **data **in the dependecies, but same result. Tried this too, but same result.

// this is the type of the field in OfficeOccupancyCardData that I want to update
interface WorkTypeData {
    selected: WorkType;
    onClick: (worktype: WorkType) => void;
    buttonLink: string;
}


interface DashboardNextDaysProps {
    data: OfficeOccupancyCardData[];
}

const DashboardNextDays: React.FunctionComponent<DashboardNextDaysProps> = ({ data }) => {
    // console log here will show data with the new value

    return (
        <HorizontalGridSlide className="DashboardNextDays" colSize={286} gap={16} pageSlide>
            {data.length > 0 &&
                data.map((day, i) => {
                    // console log here will show data with the value not updated
                    return <OfficeOccupancyCard key={generateKey(i)} data={day} />;
                })}
        </HorizontalGridSlide>
    );
};

CodePudding user response：

To see the state changes immediately, you need to use useEffect and add newData in the dependency change.

CodePudding user response：

Since setState is asynchronous you can not check state updates in console.log synchronously.