Create react custom hook

Question

Please tell me whether I can put these functionalities in the hook. If so, How can I do it ? I have marked "<==" in the lines that is needed to be moved into the hook. It's just adding and removing a class after clicking on an element.

 const Number: FC<Number> = ({ number }) => {
        const dispatch = useAppDispatch()
        const [isClicked, setIsClicked] = useState<boolean>(false) // <==
    
        const numberButtonHandler = () => {
            dispatch(addNumber(number))
    
            setIsClicked(true) // <==
            setTimeout(() => { // <==
                setIsClicked(false) // <==
            }, 100) // <==
        }
    
        return (
            <div
                className={`calc-button number ${isClicked ? 'calc-button--clicked' : ''}`}
                onClick={numberButtonHandler}>
                <p className="number__value">{number}</p>
            </div>
        )
    }

DecPK · Accepted Answer · 2022-07-02 09:21:27Z

1

Yes, You can create a custom hook which will takeinitalValue and which will return an array of isClicked and a function which will change the state as. Please change the name that looks meaningful to you.

codesandbox demo

function useCustomHook(initialState: boolean): [boolean, () => void] {
  const [isClicked, setIsClicked] = useState<boolean>(initialState);

  const changeState = () => {
    setIsClicked(true);
    setTimeout(() => {
      setIsClicked(false);
    }, 100);
  };

  return [isClicked, changeState];
}

and use it as:

const dispatch = useAppDispatch();
  const [isClicked, changeState] = useCustomHook(false);

  const numberButtonHandler = () => {
    dispatch(addNumber(number));
    changeState();
  };

answered Jul 2, 2022 at 9:21

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

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

Comments

Edshav · Accepted Answer · 2022-07-02 09:27:56Z

export function useMyHook(myNumber: number): {
  numberButtonHandler: () => void;
  isClicked: boolean;
} {
    const dispatch = useAppDispatch();
    const [isClicked, setIsClicked] = useState<boolean>(false); // <==

    const numberButtonHandler = () => {
        dispatch(addNumber(myNumber));

        setIsClicked(true); // <==
        setTimeout(() => {
            // <==
            setIsClicked(false); // <==
        }, 100); // <==
    };

    return { numberButtonHandler, isClicked };
}

const MyNumber: FC<MyNumberType> = ({ myNumber }) => {
 const { numberButtonHandler, isClicked } = useMyHook(myNumber)

  return (
      <div
          className={`calc-button number ${isClicked ? 'calc-button--clicked' : ''}`}
          onClick={numberButtonHandler}>
          <p className="number__value">{number}</p>
      </div>
  )
}

Collectives™ on Stack Overflow

Create react custom hook

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related