Coding Challenge Practice - Question 12

Today's task is to implement a useToggle hook. The boilerplate function is

export function useToggle(on: boolean): [boolean, () => void] {
  // your code here
}


// if you want to try your code on the right panel
// remember to export App() component like below

// export function App() {
//   return <div>your app</div>
// }

The first step is to create the variables to switch between states. There are only 2 states, because the purpose of a toggle is to alternate between either of them - on and off or checked and unchecked.

const [value, setValue] = useState(on)

The next step is to create the function to switch between states.

const toggle = () => {
  setValue(!value)
}
 return [value, toggle]

To see an example, there would be a button which, when clicked, switches the state of the app

export function App() {
 const[on, toggle] = useToggle(false)
 return(
 <div>
 <p>{on ? "On" : "Off"}</p>
 <button onClick{toggle}> Toggle </button>
 </div>
 )
}

The final code looks like this:

import React, { useState } from 'react';
export function useToggle(on: boolean): [boolean, () => void] {
  // your code here
   const [value, setValue] = useState(on)

    const toggle = () => {
      setValue(!value)
    }
    return [value, toggle]

}


// if you want to try your code on the right panel
// remember to export App() component like below

export function App() {
  const [on, toggle] = useToggle(false)
  return <div>
  <p>{on ? "On" : "Off"}</p>
  <button onClick={toggle}>Toggle</button>
  </div>
}