-4

I'm trying to write an SPA with a React frontend, and the very minimal code I've written is complaining about an invalid hook call.

I understand that there are, per the error message, three major reasons for this error:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app

I checked npm ls react and npm ls react-dom and they both report a single install of the respective package, with version 16.13.1, so I don't think it's reason #1 or reason #3. As for a rules-of-hooks violation, that doesn't seem possible given the code is just this:

import { useState } from "react";
import ReactDOM from "react-dom";

const Main = () => {
  const [count, setCount] = useState(0);

  return(
    <>
    </>
  );
};

const reactRoot = document.getElementById("react-root");
ReactDOM.render(Main(), reactRoot);

That looks like a perfectly good functional component to me, and there are clearly no loops or conditionals. What else might be going on here?

Phil Darnowsky
  • 412
  • 4
  • 11
  • 2
    You are calling `Main` as a function, for no apparent reason. You need to have React in scope (`import React, { useState } from 'react'`) and you need to use a JSX tag or the imperative API. – Jared Smith May 02 '20 at 19:45
  • Thanks, I see what I did--been writing lots of Python lately and that's how you would instantiate an object of class `Main` in Python. Changing to a JSX tag fixed it up. – Phil Darnowsky May 02 '20 at 19:59

1 Answers1

1

As pointed out in the comments, I meant to use a JSX tag <Main /> rather than calling Main().

Phil Darnowsky
  • 412
  • 4
  • 11