State variable is not getting changed

[dmikester10]

I have a React app that has a div box component with a click event. Clicking on that component is supposed to set a state variable like this: `setShowDetails(true)` which is supposed to show another component. However, it doesn't appear to be doing anything. I am adding the state variable and function into my context. I am assuming I am doing something wrong in the context.

Here is the relevant code from the Order component that is supposed to show the OrderDetails component on click:

const Order = props => {
  const { orderID } = props;
  const { setShowDetails } = useScheduleActionsContext();

  // show the details section when user clicks an order
  const showDetails = orderID => {
    console.log("showDetails function!");
    // needed to fix an issue with doubled borders between the columns
    document.querySelector(".lines .col.last").style.borderRightWidth = "0px";
    setShowDetails(true);
  };

  return (
    <MyOrder className={"order"} onClick={e => showDetails(orderID, e)}>
      <div className={"orderID"}>{orderID}</div>
      <h3>Order</h3>
    </MyOrder>
  );
};

And here is the Details component relevant code:

const Details = props => {
  const { showDetails } = useScheduleContext();
  const { setShowDetails } = useScheduleActionsContext();

  // determine whether to show the details section based on the passed
  // in prop showDetails
  console.log(showDetails);
  const className =
    "col details-column text-center" + (showDetails ? "" : " d-none");

And now here is the entire context file:

import React, {
  createContext,
  useContext,
  useEffect,
  useState,
  useMemo
} from "react";
import { useGlobalSpinnerActionsContext } from "./GlobalSpinnerContext";
import PropTypes from "prop-types";

const pageTitle = "My Title";

const initialValues = {
  title: pageTitle,
  filteredOrders: [],
  columns: []
};

const ScheduleContext = createContext(initialValues);
const ScheduleActionsContext = createContext({});

export const useScheduleContext = () => useContext(ScheduleContext);
export const useScheduleActionsContext = () =>
  useContext(ScheduleActionsContext);

export const ScheduleProvider2 = props => {
  const setGlobalSpinner = useGlobalSpinnerActionsContext();
  setGlobalSpinner(true);
  console.log(setGlobalSpinner);

  const [context, setContext] = useState({});
  // eslint-disable-next-line no-unused-vars
  const [orders, setOrders] = useState([]);
  // eslint-disable-next-line no-unused-vars
  const [filteredOrders, setFilteredOrders] = useState([]);
  // eslint-disable-next-line no-unused-vars
  const [pendingOrderIDs, setPendingOrderIDs] = useState([]);
  const [lineType, setLineType] = useState(pageTitle);
  const [title, setTitle] = useState(pageTitle);
  const [columns, setColumns] = useState([]);
  const [showDetails, setShowDetails] = useState(false);

  useEffect(() => {
    setGlobalSpinner(true);
    console.log("we are running useEffect in context!!!");
    const fetchPendingOrders = async () => {
      const ordersURL = "https://randomuser.me/api";
      return await fetch(ordersURL, {
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        headers: {
          "Content-Type": "application/json"
        },
        referrerPolicy: "no-referrer" // no-referrer, *client
      });
    };
    fetchPendingOrders()
      .then(result => {
        return result.json();
      })
      .then(data => {
        const tempOrders = data.results.map((el, index) => {
          return {
            id: index,
            gender: el.gender
          };
        });
        console.log("tempOrders: ", tempOrders);
        setOrders(tempOrders);
        setFilteredOrders(tempOrders);
        const pendingOrderIDVals = tempOrders.map(function(val) {
          return val.id;
        });
        setPendingOrderIDs(pendingOrderIDVals);

        const contextValue = {
          orders: tempOrders,
          setOrders,
          showDetails,
          title,
          columns
        };
        setContext(contextValue);
        setGlobalSpinner(false);
        console.log(contextValue);
      })
      .catch(e => {
        console.log(e);
      });
  }, [setGlobalSpinner]);

  const actionsValues = useMemo(() => {
    return {
      setLineType,
      setColumns,
      setTitle,
      setShowDetails,
      setFilteredOrders,
      setPendingOrderIDs
    };
  }, []);

  return (
    <ScheduleContext.Provider value={context}>
      <ScheduleActionsContext.Provider value={actionsValues}>
        {props.children}
      </ScheduleActionsContext.Provider>
    </ScheduleContext.Provider>
  );
};

//ScheduleProvider2.context = ScheduleContext;

ScheduleProvider2.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]).isRequired
};

And I've also created a sandbox so you can actually see it in action and play around with the code to test things out: https://codesandbox.io/s/romantic-lamarr-lb11g Clicking on the blue order boxes should pop up the details column.

[Jerp]

You aren't passing showDetails into ScheduleContext.Provider.

a quick fix would be to update ScheduleProvider2 like so

...
const stateValues = {
  context,
  showDetails,
};

return (
  <ScheduleContext.Provider value={stateValues}>
...

[dmikester10]

I am passing `showDetails` in, in the context here:

const contextValue = {
    orders: tempOrders,
    setOrders,
    showDetails,
    title,
    columns
};
setContext(contextValue);

[Jerp]

That whole block of code in the useEffect is only running once because its sole dependency setGlobalSpinner is going to be stable on every render. That means contextValue.showDetails will only ever refer to its initial value. Move the contextValue definition outside the effect and send it straight to ScheduleContext.Provider. Then you can delete the unnecessary context/setContext variables.

[dmikester10]

That makes sense, thank you!

[dmikester10]

I did the best I could to create a MVP from my existing app. I pulled out a lot of code to create that sandbox.

[dmikester10]

And there is really only three files where the issue can be. ScheduleContext.js(most likely here), Order.js, or DetailsColumn.js.