JSFiddle - React, Tailwind, and code Playground

by constant101

JavaScript

//Store export(receiving data from the server and assigning them to variables)
import React, {useState, useEffect} from 'react'
import axios from 'axios'


export const ListContext = React.createContext([]);
export const ItemContext = React.createContext([]);

function Store() {
  const [storeProducts, setStoreProducts] = useState([]);
  const [detailProduct, setDetailProduct] = useState([]);

   useEffect(() => {
    axios.get('/products/')
    .then(res => {
      console.log(res)
      setStoreProducts(res.data)
    })
    },[])
console.log('storeProducts:', storeProducts)

 useEffect(() => {
    axios.get('/products/:productId')
    .then(res => {
      console.log(res)
      setDetailProduct(res.data)
    })
    },[])
console.log('detail product:', detailProduct)
  return (
  	
    <ListContext.Provider value={[storeProducts, setStoreProducts]}>
     <ItemContext.Provider value={[detailProduct, setDetailProduct]}>
       <product/>
        </ItemContext.Provider>
    </ListContext.Provider>


    );
}
export const detailProduct
//product.js ( file that uses data from the fetch)
import React, { useReducer, createContext, useContext, useState } from 'react';
import {ListContext, ItemContext } from '../Store';
import { useProductActions } from '../actions';
import { SET_PRODUCT_DETAILS } from '../actions/types';

  const [storeProducts] = useContext(ListContext);
  const [detailProduct] = useContext(ItemContext);

let tempProducts = [];

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

const initialState = {
  products: tempProducts,
  productDetails: { ...detailProduct }
};
console.log(storeProducts)

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);

export const useProductState = () => {
 ...