hooks in export default class App extends React.Component

Question

I'm trying to build a React Native app and re-use some of the principles from reactnativeschool but I'm struggling with the Hook:

  const { scrollEnabled, setScrollEnabled } = useState(false);

placed in:

export default class App extends React.Component {

It i originally placed in export default () => { but I have to change that for other reasons.

Depending where I place it, I either get unexpected token or Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 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 See for tips about how to debug and fix this problem.

I have tried moving it around and refactoring but no luck. Can you find out what is wrong or where it should be placed?

I'll try to give a skeleton of my code below:

import React, { useState, useContext } from "react";
import {  View,  StyleSheet,  StatusBar,  Dimensions,  Text,  ScrollView,  TouchableOpacity} from "react-native";

const screen = Dimensions.get("window");

const formatNumber = (number) => `0${number}`.slice(-2);

const getElapsed = (time) => {
  return {
    hours: formatNumber(hours)
  };
};

const { scrollEnabled, setScrollEnabled } = useState(false); // Issue with this line. Tried to move it in different places

export default class App extends React.Component {
  interval = null;

  constructor(props) {
    super(props);

    this.state = {
      elapsedMilliseconds: 0
    };
  }

  stop = () => {
    clearInterval(this.interval);
    this.interval = null;
    this.setState({
      isRunning: false,
    });
  };

  render() {
    const { hours, minutes, seconds, milliseconds } = getElapsed(
      this.state.elapsedMilliseconds
    );

    return (

      <View style={styles.container}>
        <ScrollView>
          <View style={styles.content}>
            // Stuff
          </View>

        </ScrollView>
      </View>
    );
  }
}

question from:https://stackoverflow.com/questions/65864953/hooks-in-export-default-class-app-extends-react-component

Answer 1

first, you can only use hook inside functional component, not in class component or outside component.

if you are using class component, just use state and setState instead of hook

like:

export default class App extends React.Component {
   constructor(props){
   this.state = {
      scrollEnabled: true
   }
   }

   stop = () =>{
    this.setState({scrollEnabled: false})
   }

   render(){
      return (
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.content}>
            // Stuff
          </View>

        </ScrollView>
      </View>
      )
   }

}