Hooked: useState()

On my first project using JavaScript, I tried to create a button that had dual functionality. On the first click, this button would return a form and the second click would hide the form. After several hours of research and speaking with others, I ultimately determined there was no way to have my button do this and a second button would be required to hide the form. This was frustrating as I was sure there had to be a way to create this functionality.

A few weeks into learning React we were introduced to hooks and the first hook we learned was useState(). UseState, "is a Hook that lets you add React state to function components", and an example of how you would use this would be for dual button functionality.

For example, take a look at the button that I created using strictly JavaScript

gameButton.addEventListener('click', createGameForm)
  function createGameForm(e){
    addGameForm.innerHTML = `
      <ul>
      <form id = 'gameform'>
        ...
      <button id = 'back_btn'> Hide </button>
      </ul>` 
      const gameform = document.querySelector('#gameform')
      gameform.addEventListener('submit', (e) => {
        e.preventDefault() 
        let game = {
          ...
          }
          renderGame(game)
          createAGame(game)
          hideGame()
        })
        const backButton = document.querySelector('#back_btn')
        backButton.addEventListener('click', hideGame)
  }

If we were to introduce React and a hook to this code it would clean it up but also add the dual functionality.

import react, {useState} from react

function formButton(){

return(
<div>
</div>

)

The first step in breaking down the original code would be importing react and useState as well as breaking it down into a component.

import react, {useState} from react

function formButton(){

const [setButtonActive, isSetButtonActive] = useState(false)

const gameForm = (
<div>
   <form id = 'gameform'>
     ...
   </form id = gameform>
</div>

return(
<div>
</div>
)

Next, to get rid of the hide button useState must be implemented by adding a destructured variable const [setButtonActive, isSetButtonActive] = useState(false) the first value is the state variable while the second is a function that changes the state. In this case, we will set the state to false, but there are several other things that state can be set to as well like strings, integers, and arrays.

import react, {useState} from react

function formButton(){

const [setButtonActive, isSetButtonActive] = useState(false)

const gameForm = (
<div>
   <form id = 'gameform'>
     ...
   </form id = gameform>
</div>
function handleClick(){
setButtonActive((setButtonActive) => !isSetButtonActive)
}

const showForm = setButtonActive ? {gameForm} : null;

return(
<div>
 <button onClick = {handleClick}> Click Me </Button>
 {showForm}
</div>
)

We will then set up the final steps which would be creating a function that will be linked to the button onClick event that changes the state from true to false. We finally follow that with a ternary condition const showForm = setButtonActive ? {gameForm} : null; which will toggle between the form and null, which will show nothing. UseState was exactly the answer I was looking for when originally creating my form button. This is possibly the simplest way to use useState and there are many more advanced ways that it can be used.