getting error Invalid hook call when I call one component in class component

user_13433962 0
Viewed 61

When I used the same method in another project then It was working well but I decided to use the same method for my current project then I am having an issue with the given below

react-dom.development.js:14724 Uncaught Error: 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 some tips for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.development.js:14724:13)
    at useState (react.development.js:1497:21)

Below is my first component name is GetWindowWidth.js. this component is related to apply the screen with for desktop, tab, and mob screen GetWindowWidth.js

import {useState,useEffect} from "react";

const GetWindowWidth = () => {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        window.addEventListener("resize", updateWidth);
        return () => window.removeEventListener("resize", updateWidth);
    });

    const updateWidth = () => {
        setWidth(window.innerWidth);
    };
    return width;
}

export default GetWindowWidth;

Below is another component where I am trying to call the above component to apply the screen width. AnotherComponent.js

import React, { Component } from 'react'
import GetWindowWidth from './GetWindowWidth';

export class AnotherComponent extends Component {
  render() {
    const width = GetWindowWidth();
    return (
      <div color={width<600? '#161625':"#f3990f"}>UserCatalogTwo</div>
    )
  }
}
export default AnotherComponent

I don't why this is coming even it's working on other projects.

react-native reactjs javascript
1 Answers

GetWindowWidth is a hook, not a component, since it doesn't render anything. (And for that reason its name should start with use.) You can't use hooks in class components. You'll have to either rewrite the class component as a function component, or write a non-hook version of GetWindowWidth.

For instance, you might have a module with a function that sets up the resize handler:

// watchwidth.js
export function watchWidth(callback) {
    const handler = () => {
        callback(window.innerWidth);
    };
    window.addEventListener("resize", handler);
    return () => {
        window.removeEventListener("resize", handler);
    };
}

...then import it:

import { watchWidth } from "./watchwidth.js";

...and use it in your class component:

componentDidMount() {
    this.stopWatchingWidth = watchWidth(width => this.setState({width}));
}

componentWillUnmount() {
    this.stopWatchingWidth();
}

That's off-the-cuff and untested, but gives you an idea.

user_1572470
Related