Как корректно передать переменные с json данными в другой компонент через контекст?

WapSter, спасибо за ответ, если не сложно, проясни вот что:
это прежняя логика(json тянулся из data,js)
//product.js
import React, { useReducer, createContext, useContext } from 'react';
import { storeProducts, detailProduct } from '../data';
import { useProductActions } from '../actions';
import { SET_PRODUCT_DETAILS } from '../actions/types';

let tempProducts = [];
storeProducts.forEach(item => tempProducts.push({ ...item }));

const initialState = {
products: tempProducts,
productDetails: { ...detailProduct }
};

const productReducer = (state, action) => {
switch (action.type) {
case SET_PRODUCT_DETAILS:
return {
...state,
productDetails: action.payload
};
default:
throw new Error('Invalid action type');
}
};

export const ProductContext = createContext(initialState);

// Custom hook for using product context
export const useProductState = () => {
return useContext(ProductContext);
};

export const ProductProvider = ({ children }) => {
const [state, dispatch] = useReducer(productReducer, initialState);
const productActions = useProductActions(state, dispatch);
return (

{children}

);
};
//data.js выглядел так
export const storeProducts = [{
"isEditable": false,
"id": "4423b750-48ea-424a-9432-c77261bb4682",
"name": "Handcrafted Soft Table",
"price": 407,
"origin": "europe",
"createdAt": "2020-01-20T08:56:16.057Z",
"updatedAt": "2020-01-20T08:56:16.057Z"
},
{
"isEditable": false,
"id": "b7c42263-d46d-4d4b-af2a-ccc076f90c99",
"name": "Unbranded Metal Bacon",
"price": 990,
"origin": "africa",
"createdAt": "2020-01-20T08:56:16.074Z",
"updatedAt": "2020-01-20T08:56:16.074Z"
},
export const detailProduct = {
"isEditable": false,
"id": "2b723041-8e90-4b90-9a39-2f92ee611577",
"name": "Licensed Rubber Soap",
"price": 881,
"origin": "usa",
"createdAt": "2020-01-20T08:56:16.131Z",
"updatedAt": "2020-01-20T08:56:16.131Z"
};

как максимально компактно и просто(+ без redux) можно присвоить переменным storeProducts, detailProduct данные json, но теперь из fetch запроса и использовать их в product.js? Обширную логику не успею реализовать. Спасибо за ответ!

ReactJS: Как распределить элементы из api в jsx блоки по значению даты?

0xD34F, пардон, себя прокомментировал по ошибке

Спасибо огромное! но при выполнения пунктов 3) подсветить месяца в зависимости от количества людей, которые родились в этом месяце. и
4) при наведении на выбранный месяц - отобразить список людей, родившихся в этом месяце.
натыкаюсь на ошибки. Очевидно, что некорректна функция if else, но менял слишком много раз, утыкаясь в ошибки(.


https://jsfiddle.net/h2548sg1/

//Не получается получить доступ к массиву(ключу) users в объектах массива groupedUsers
К какому элементу(массиву обращаться) для смены цветов блоков в зависимости от кол-ва юзеров, а также выводу их при наведении? Если все же к users, то как грамотно построить функция Object.keys для корректной ее отработки в данном случае?

Еще раз спасибо!

ReactJS: Как распределить элементы из api в jsx блоки по значению даты?

Скрин объекта groupedUsers
Как я понял, для проверки на длину,обратиться нужно к элементу users.length в элементе массива, который содержит данный объект. Однако, возникли трудности с доступом к этому ключу.