Uncaught Error: Hooks can only be called inside the body of a function component within Class component [duplicate]

Question

I'm getting the error below when running the example attached at the bottom:

react-dom.development.js:49 Uncaught Error: Hooks can only be called inside the body of a function component.
    at invariant (react-dom.development.js:49)
    at resolveCurrentlyRenderingFiber (react-dom.development.js:11633)
    at useReducer (react-dom.development.js:11830)
    at Object.useState (react-dom.development.js:11824)
    at Object.useState (react.development.js:2574)
    at App.render (<anonymous>:25:35)
    at finishClassComponent (react-dom.development.js:14466)
    at updateClassComponent (react-dom.development.js:14429)
    at beginWork (react-dom.development.js:15233)
    at performUnitOfWork (react-dom.development.js:17940)

class App extends React.Component {
  render() {
    const [name, setName] = React.useState('Mary');
    const [age, setAge] = React.useState(10);

    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <App />
  </div>,
  document.querySelector("#app")
);

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

According to Docs(reactjs.org/docs/hooks-faq.html), "Hooks are a new feature proposal that lets you use state and other React features without writing a class." — Vivek
– Vivek, Commented Nov 20, 2018 at 5:34

Yangshun Tay · Accepted Answer · 2018-11-21 18:08:49Z

2

Hooks are not supported within class components and you should instead make it a functional component or not use hooks at all if you still rely on some class component features.

function App() {
  const [name, setName] = React.useState('Mary');
  const [age, setAge] = React.useState(10);

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

ReactDOM.render(
  <div>
    <App />
  </div>,
  document.querySelector("#app")
);

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

edited Nov 21, 2018 at 18:08

answered Nov 20, 2018 at 5:27

Yangshun Tay

53.7k34 gold badges126 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhojendra Rauniyar · Accepted Answer · 2018-11-20 05:44:35Z

0

You may also use like:

class App extends React.Component {
  renderApp() { // function within class component
    const [name, setName] = React.useState('Mary');
    const [age, setAge] = React.useState(10);

    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    );
  }
  render() {
    return this.renderApp()
  }
}

This will be helpful further if you want to render something else and also helpful for using other lifecycle hooks:

render() {
  return (
    <div>
     <h1>My App</h1>
     { this.renderApp() }
    </div>
  )
}

edited Nov 20, 2018 at 5:44

answered Nov 20, 2018 at 5:34

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

3 Comments

Yangshun Tay Over a year ago

Your example does not work. See my answer with an updated example of your answer.

Bhojendra Rauniyar Over a year ago

I have provided an answer based on the question code. What's wrong in my answer?

Yangshun Tay Over a year ago

I appreciate your response, but I'm confused as to why you provided a snippet of code which you said was helpful but will still throw the same error

Collectives™ on Stack Overflow

Uncaught Error: Hooks can only be called inside the body of a function component within Class component [duplicate]

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related