CODEWITHSUNDEEP
reactjsimportreact-hooks
Marcos Collado
Marcos Collado

Reputation: 41

Uncaught Invariant Violation: Hooks can only be called inside the body of a function component

As it says in the title I appearently cant use hooks

I know some of you will try and tell me this is a duplicate, but its not in all the questions I have seen nobody seems to ask what is the proper way to use the imported functional component The Component I attempt to render.

    import React from 'react';
import { hot } from 'react-hot-loader';
import Playground from '../playground/index';

class App extends React.Component {
  render() {
    Playground();
    return (
      <div>
        <p>Hello World</p>
      </div>
    );
  }
}

export default hot(module)(App);

My dev Dependencies:

I include them because I have seen in other answers people claim is due to the version (I have all updated react wise)

"devDependencies": {
    "sass-loader": "7.1.0",
    "sass": "*",
    "@babel/cli": "7.1.5",
    "@babel/core": "7.1.5",
    "@babel/plugin-proposal-class-properties": "7.1.0",
    "@babel/plugin-syntax-dynamic-import": "7.0.0",
    "@babel/preset-env": "7.1.5",
    "@babel/preset-react": "7.0.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-dynamic-import-node": "2.2.0",
    "css-loader": "1.0.1",
    "eslint": "5.12.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.12.3",
    "html-webpack-plugin": "3.2.0",
    "husky": "1.3.1",
    "jest": "23.6.0",
    "jest-dom": "2.1.1",
    "node-sass": "4.11.0",
    "node-sass-chokidar": "1.3.4",
    "prettier": "1.15.2",
    "pretty-quick": "1.8.0",
    "react-axe": "3.0.2",
    "react-testing-library": "5.2.3",
    "style-loader": "0.23.1",
    "webpack": "4.25.1",
    "webpack-bundle-analyzer": "3.0.3",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "3.1.10",
    "webpack-merge": "4.1.4"
  }

And the functional component I try to import:

import React, { useState } from 'react';

export default function Playground() {
  const [text, setText] = useState('');
  const [checked, setCheck] = useState(false);

  return (
    <section>
      <input type="text" value={text} onChange={e => setText(e.target.value)} />
      <input
        type="checkbox"
        value={checked}
        onChange={e => setCheck(e.target.value)}
      />
      <ul>
        <li>{text}</li>
        <li>{checked.toString()}</li>
      </ul>
    </section>
  );
}

Upvotes: 0

Views: 2728

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 81046

The proper way to use a function component is no different than the proper way to use a class component. You shouldn't try to call your component function -- just like you don't create instances of your classes -- you just use it in your JSX.

By calling your component function, you essentially treat it as a custom hook (a custom hook is just a function that uses React's built-in hooks like useState) that returns React elements. This causes React to complain because you are calling a custom hook from the render method of a class component rather than from the body of a function component.

Here's a possible way to use your Playground component:

import React from 'react';
import Playground from '../playground/index';

class App extends React.Component {
  render() {
    return (
      <Playground/>
    );
  }
}

Upvotes: 2

Related Questions