Kevin Powell - Community•5mo ago

help with react context

Im making a tooltip that is on the topmost part of the document, and it needs to know if a component is being hovered, that component is nested. TooltipContext file

import { createContext, useState, useContext } from "react";
import PropTypes from "prop-types";

const TooltipContext = createContext();

const TooltipProvider = ({ children }) => {
  const [tooltip, setTooltip] = useState({
    visible: false,
    name: "",
    position: null,
  });

  const handleServerHover = (isHovered, name, position) => {
    if (isHovered) {
      setTooltip({
        visible: isHovered,
        name: name,
        position: {
          top: position.top,
          height: position.height,
          left: position.right,
        },
      });
    } else {
      setTooltip((prev) => ({
        ...prev,
        visible: false,
      }));
    }
  };

  return (
    <TooltipContext.Provider value={{ tooltip, handleServerHover }}>
      {console.log("BINGUS")}
      {children}
    </TooltipContext.Provider>
  );
};

TooltipProvider.propTypes = {
  children: PropTypes.element,
};

// Custom hook to use the TooltipContext
const useTooltip = () => useContext(TooltipContext);
export { TooltipProvider, useTooltip };

import { createContext, useState, useContext } from "react";
import PropTypes from "prop-types";

const TooltipContext = createContext();

const TooltipProvider = ({ children }) => {
  const [tooltip, setTooltip] = useState({
    visible: false,
    name: "",
    position: null,
  });

  const handleServerHover = (isHovered, name, position) => {
    if (isHovered) {
      setTooltip({
        visible: isHovered,
        name: name,
        position: {
          top: position.top,
          height: position.height,
          left: position.right,
        },
      });
    } else {
      setTooltip((prev) => ({
        ...prev,
        visible: false,
      }));
    }
  };

  return (
    <TooltipContext.Provider value={{ tooltip, handleServerHover }}>
      {console.log("BINGUS")}
      {children}
    </TooltipContext.Provider>
  );
};

TooltipProvider.propTypes = {
  children: PropTypes.element,
};

// Custom hook to use the TooltipContext
const useTooltip = () => useContext(TooltipContext);
export { TooltipProvider, useTooltip };

9 Replies

thereturningOP•5mo ago

Being used in home.jsx but there is this error at useTooltip() being undefined TypeError: Cannot destructure property 'tooltip' of 'useTooltip(...)' as it is undefined. at Home (Home.jsx:16:11)

import MessageContainer from "../../components/messages/MessageContainer";
import Serverbar from "../../components/serverbar/Serverbar";
import Servers from "../../components/serverbar/Servers";
import Tooltip from "../../components/serverbar/Tooltip";
import Sidebar from "../../components/sidebar/Sidebar";
import { CSSTransition } from "react-transition-group";
import { useState, useRef } from "react";
import {
  TooltipProvider,
  useTooltip,
} from "../../components/serverbar/TooltipContext";

const Home = () => {
  const nodeRef = useRef(null);
  console.log(TooltipProvider);
  const { tooltip } = useTooltip(); ERROR UNDEFINED
  return (
    <div className="flex overflow-hidden">
      <TooltipProvider>
        <Serverbar />
        <CSSTransition
          in={tooltip.visible}
          nodeRef={nodeRef}
          timeout={75}
          classNames="server-tooltip"
          unmountOnExit
        >
          <Tooltip
            ref={nodeRef}
            name={tooltip.name}
            position={tooltip.position}
          />
        </CSSTransition>
      </TooltipProvider>

      <Sidebar />
      <MessageContainer />
    </div>
  );
};
export default Home;

import MessageContainer from "../../components/messages/MessageContainer";
import Serverbar from "../../components/serverbar/Serverbar";
import Servers from "../../components/serverbar/Servers";
import Tooltip from "../../components/serverbar/Tooltip";
import Sidebar from "../../components/sidebar/Sidebar";
import { CSSTransition } from "react-transition-group";
import { useState, useRef } from "react";
import {
  TooltipProvider,
  useTooltip,
} from "../../components/serverbar/TooltipContext";

const Home = () => {
  const nodeRef = useRef(null);
  console.log(TooltipProvider);
  const { tooltip } = useTooltip(); ERROR UNDEFINED
  return (
    <div className="flex overflow-hidden">
      <TooltipProvider>
        <Serverbar />
        <CSSTransition
          in={tooltip.visible}
          nodeRef={nodeRef}
          timeout={75}
          classNames="server-tooltip"
          unmountOnExit
        >
          <Tooltip
            ref={nodeRef}
            name={tooltip.name}
            position={tooltip.position}
          />
        </CSSTransition>
      </TooltipProvider>

      <Sidebar />
      <MessageContainer />
    </div>
  );
};
export default Home;

is there a way to use a usecontxt inside my csstransition in={}?

missymae•5mo ago

Sorry I don't know exactly, but possibly the tooltip useState is initializing with the wrong object shape - maybe try using an object with top, height, left when initializing the position property in the default useState.

thereturningOP•5mo ago

oh ok so dont use null i think im not allowed to use useContext if its not inside of the provider

missymae•5mo ago

I also see the provider value object is wrapped with double brackets, can't remember if that's always right or not. Sometimes the shape of the initial object needs to match exactly, or expected properties don't exist when first loaded Or could be that too, but you had a custom hook so I guessed you knew a trick lol

thereturningOP•5mo ago

the custom hook just wrapped the useContext ill try moving the stuff inside of tooltipProvider into another component

missymae•5mo ago

That error is usually clear though, I think it says that context can only be used within the provider wrapped components.

thereturningOP•5mo ago

I fixed it

missymae•5mo ago

what worked?

thereturningOP•5mo ago

i put <css transition><toltip><css> in another component, then i was able to use my usecontext hook

Gaming

Programming

help with react context