_react.default.useContext is not a function

Question

I am using material ui stepper.
I used from there site but its broken
so I debugged and gave console inside VerticalLinearStepper method.
its printting a method at this line console.log("useStyles----->", useStyles);
but I am facing an error _react.default.useContext is not a function
can you tell me how to fix it.
so that in future I will fix it myself.
providing code snippet and sandbox below

function VerticalLinearStepper() {
  console.log("useStyles----->", useStyles);

  const classes = useStyles();

  const [activeStep, setActiveStep] = React.useState(0);
  const steps = getSteps();

  function handleNext() {
    setActiveStep(prevActiveStep => prevActiveStep + 1);
  }

  function handleBack() {
    setActiveStep(prevActiveStep => prevActiveStep - 1);
  }

  function handleReset() {
    setActiveStep(0);
  }

user_3908193 · Answer

@material-ui/styles has a peer dependency on react >= 16.7.0-alpha.0 and react-dom >= 16.7.0-alpha.0 Update your react and react-dom dependencies to:

"dependencies": {
    "react": "^16.7.0-alpha.2",
    "react-dom": "^16.7.0-alpha.2",
},

user_2681964 · Answer

From what I can see, you are using a version of React that does not yet have support for hooks (useXXX)

It sometimes confuses me too, but latest as a version in your package.json actually means "Latest stable version".
To use a version that supports hooks, you can use the version next for react as well as react-dom :)

_react.default.useContext is not a function

2 Answers