CODEWITHSUNDEEP
reactjs
Cruse
Cruse

Reputation: 615

How to call a Custom Hook in a React function

I am working on a React project in my project I have one custom hook, Now I am trying to call that custom hook in one function but it is showing error like this React Hook "useMediaQuery" is called in function "applyStyle" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter

So someone help me how to resolve this issue

This is my code

This is App.js

import React, { useState, useLayoutEffect } from 'react';
import './App.css';


const App = () => {
    const [style, setStyle] = useState(null)


    function useMediaQuery() {
        const [screenSize, setScreenSize] = useState([0]);
        
        useLayoutEffect(() => {
          function updateScreenSize() {
            setScreenSize([window.innerWidth]);
          }
          window.addEventListener("resize", updateScreenSize);
          updateScreenSize();
          return () => window.removeEventListener("resize", updateScreenSize);
        }, []);
        
        return screenSize;
      }

      const applyStyle = () => {
          if(useMediaQuery() === 320) {
              setStyle({
                  marginBottom: '150px'
              })
          }
      }

return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='first'>
                        <button onClick={applyStyle} style={style}  className='btn btn-primary'>Click here</button>
                        <span className='closeWindow'><i className="far fa-window-close"></i></span>
                    </div>
                    <div className='second'>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default App

````

Upvotes: 1

Views: 5124

Answers (2)

Robert Tirta
Robert Tirta

Reputation: 2911

I think you forgot the 2 most important rules of hook

It says

Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks. We’ll learn about them in a moment.)

So your case should be:

import React, { useState, useLayoutEffect } from 'react';
import './App.css';


const App = () => {
    const [style, setStyle] = useState(null)


    function useMediaQuery() {
        const [screenSize, setScreenSize] = useState([0]);
        
        useLayoutEffect(() => {
          function updateScreenSize() {
            setScreenSize([window.innerWidth]);
          }
          window.addEventListener("resize", updateScreenSize);
          updateScreenSize();
          return () => window.removeEventListener("resize", updateScreenSize);
        }, []);
        
        return screenSize;
      }
      
      const mediaQuery = useMediaQuery();

      const applyStyle = () => {
          if(mediaQuery === 320) {
              setStyle({
                  marginBottom: '150px'
              })
          }
      }

return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='first'>
                        <button onClick={applyStyle} style={style}  className='btn btn-primary'>Click here</button>
                        <span className='closeWindow'><i className="far fa-window-close"></i></span>
                    </div>
                    <div className='second'>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default App

Upvotes: 1

Haseeb Anwar
Haseeb Anwar

Reputation: 2918

You can use hooks in either the component or a hook, not in functions of a component. So do it like

// also it is better to define your hook outside the component
function useMediaQuery() {
  const [screenSize, setScreenSize] = useState([0]);

  useLayoutEffect(() => {
    function updateScreenSize() {
      setScreenSize([window.innerWidth]);
    }
    window.addEventListener("resize", updateScreenSize);
    updateScreenSize();
    return () => window.removeEventListener("resize", updateScreenSize);
  }, []);

  return screenSize;
}

const App = () => {
  const [style, setStyle] = useState(null);

  // use your custom hook here
  const mediaQuery = useMediaQuery();

  const applyStyle = () => {
    if (mediaQuery === 320) {
      // use hook values
      setStyle({
        marginBottom: "150px",
      });
    }
  };

  return <div>// render something</div>;
};

Upvotes: 0

Related Questions