// Parent Component
const handleViewPackage = (itemId) => {
const currentItem = packageLists.content.find((e) => e.id === itemId);
dispatch(
openUpdatePackageModal({ isOpen: true, packageData: currentItem })
);
};
const manageListsItems = packageLists.content && packageLists.content.length > 0
? packageLists.content.map((item) => ({
id: item.id,
name: item.divisionName,
division: item.divisionName,
status: item.packageStatus,
session: item.durationTime + " " + item.durationType,
cost: item.cost,
imageUrl: getImageOnDivisionName(item.divisionName),
action: () => handleViewPackage(item.id),
}))
: [];
// Child Component
function ChildComponent({ item }) {
const handleAction = () => {
item.action();
};
return (
<li onClick={handleAction}></li>
);
}
While refreshing the page, I’m facing the warning: “Functions are not valid as a React child.” This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.