reactjs TypeError: Object(...) is not a function when using hooks

Question

I am trying to export a normal functional component using the react hooks but I am getting this error.

TypeError: Object(...) is not a function

when I remove the hooks and export it without any states it works. Exporting the same code as a Class component also works.

import React,{ useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Mycomponent;

here is how I am importing and using functional component.

import Mycomponent from './mycomponet';
class MYClassComponent extends Component {
  render() {
    return (
      <Mycomponent />
    }
}

I am using react 16.6.3 and used create-react-app.

Answer 1

I am using react 16.6.3...

That's the problem. Hooks were added in v16.8, so useState in your code is undefined.

(This is one of those times that transpiling hid the error from you [not that you have much choice if you need to support older environments]. If that had been a native import statement, it would have failed with a useful error saying that React didn't have a useState named export. But when using a CJS or AMD version of React, your code gets converted to something doing var useState = React.useState; and so it doesn't error out, it just gives you undefined — which isn't a function. :-) )