scrimba
Frontend Career Path
Advanced React
Reusability
Custom Hooks - useToggle part 2
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Custom Hooks - useToggle part 2
AboutCommentsNotes
Custom Hooks - useToggle part 2
Expand for more info
hooks
useToggle.js
run
preview
console
/**
* Create the beginnings of the useToggle custom hook!
*
* 1. Create a function called useToggle(). Skip the
* parameters for now. (We'll come back to that)
* 2. Bring the useState and toggle function from
* our Toggle component into this hook
* 3. Add the missing import (React)
* 4. RETURN from this function an array with `on` as
* the first parameter and `toggle` as the second
* parameter.
* 5. Add the missing import in Toggle.js
*/

export default function useToggle() {
const [on, setOn] = React.useState(false)

function toggle() {
setOn(prevOn => !prevOn)
}
}
Console
!
ReferenceError: useToggle is not defined
,
!
ReferenceError: useToggle is not defined
,
!
"The above error occurred in the <Toggle> component: at Toggle (https://cw0.scrimba.com/components/Toggle/Toggle:4:34) at Star (https://cw0.scrimba.com/components/Star:4:32) at App Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries."
,
!
ReferenceError: useToggle is not defined
,
/index.html
-3:13