How can I render information in a react application based on bool value?

I am very new to react and js so I am having trouble with bool logic.

So I have a function Profile that contains two const methods that each return different information.

 function Profile(props) {

 const returnNormalProfile()

 const returnEditableProfile()

Then I have this to return each const based on page

 if (existsCookie) {

if(isInEditMode){
  return(
    <div>
      {returnNormalProfile()}
    </div>
  )
}else{
  return(
    <div>
      {returnEditableProfile()}
    </div>
  )
   }
} return NotLoggedIn
}

Q: How can I set a bool variable such as "isInEditMode" and then return the page based on if it’s true or not.

Current Issue: I tried doing var isInEditMode = false
then doing the return but doesn’t work.

The current functionality is set so the top of the page has a button such as in each page

    <form onSubmit={(b) => handleEdit(b)} style={{ textAlign: 'center' }}>
      <input type="submit" value="Done" />
    </form>

So when I return returnNormalProfile it calls this code

    const handleEdit = () => {
        isInEditMode = true
     }

What can I do to make this work? I have seen people use const [editMode, setEditMode] = useState(false). However, I do not understand how to use it in this way.

>Solution :

You have to use state. isInEditMode must be a react state that when changed will cause a rerender and return the corresponding UI according to its value.
declare isInEditMode as state using useState:

    const [isInEditMode,setIsInEditMode] = useState(false)

then update isInEditMode:

const handleEdit = () => {
        setIsInEditMode(true)
     }