change the value in Hook onClick-CodePudding

I have a customized Hook to change the state of the of a use state variable from true to false, and i want to change it on the onclick of a button to show and hide a div, how can this be done?

import { useEffect, useState } from 'react';

export const useOpenFiltersHook = (): boolean => {
  const [showFilter, setShowFilter] = useState(false);

  useEffect(() => {
    function handleShowFilter(): void {
      setShowFilter(true);
    }

    window.addEventListener('resize', handleShowFilter);
    handleShowFilter();

    return () => window.removeEventListener('resize', handleShowFilter);
  }, []);
  return showFilter;
};

 const showFilter = useOpenFiltersHook();
{showFilter && (
        <div>
          <button onClick={() => !showFilter}>
            <div>Show filter</div>
          </button>
        </div>
      )}

CodePudding user response：

Return setShowFilter from your hook and call that in onClick

CodePudding user response：

I update answer of Bikas Lin. Mostly it is correct but have few issues.

Function declaration shouldn't be there. And currently it will always be opened after initialization, so better approach will be:

import { useEffect, useState } from 'react';

export const useOpenFiltersHook = (isOpened): boolean => {
  const [showFilter, setShowFilter] = useState(isOpened);

  function handleShowFilter(): void {
    setShowFilter(true);
  }

  useEffect(() => {
    window.addEventListener('resize', handleShowFilter);

    return () => window.removeEventListener('resize', handleShowFilter);
  }, []);
  return { showFilter, setShowFilter };
};

So now you can set whether you want it to be initially shown or not. You can also include toggle logic into your hook, so you wouldn't need to to do it in all of your components. Depending on your situation you can just return toggle function instead of setShowFilter, or add it as a third property.

CodePudding user response：

import { useEffect, useState } from 'react';

type TOpenFilterHook = {
  showFilter: boolean,
  setShowFilter: any
}

export const useOpenFiltersHook = (): TOpenFilterHook => {
  const [showFilter, setShowFilter] = useState(false);

  useEffect(() => {
    function handleShowFilter(): void {
      setShowFilter(true);
    }

    window.addEventListener('resize', handleShowFilter);
    handleShowFilter();

    return () => window.removeEventListener('resize', handleShowFilter);
  }, []);
  return { showFilter, setShowFilter };
};


... ... ...

const { showFilter, setShowFilter } = useOpenFiltersHook();
  {showFilter && (
    <div>
      <button onClick={() => setShowFilter(false)}>
        <div>Show filter</div>
      </button>
    </div>
  )}

CodePudding user response：

This is not a way to update state in react

 <button onClick={() => !showFilter}>

Instead return the state update function from your custom hook

export const useOpenFiltersHook = (): boolean => {
  const [showFilter, setShowFilter] = useState(false);

  useEffect(() => {
    function handleShowFilter(): void {
      setShowFilter(true);
    }

    window.addEventListener('resize', handleShowFilter);
    handleShowFilter();

    return () => window.removeEventListener('resize', handleShowFilter);
  }, []);
  return { showFilter, setShowFilter };
};

Now you can access the set state function in your component by

 const {showFilter, setShowFilter } = useOpenFiltersHook();
{showFilter && (
        <div>
          <button onClick={setShowFilter((previousState)=> return !previousState)}>
            <div>Show filter</div>
          </button>
        </div>
      )}