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.

CodePudding user response：

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)

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

then update isInEditMode:

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

So, I think your problem is that u use the onSubmit handler in a different component, but u need to update the value of isEditMode inside the Profile component.

So without knowing your component structure u should try to give the handler and value as prop from Form to Profile component. (or use something like App component to do that.)

import React, {useState, useEffect} from 'react';

function FormComponent(props) {
  const [isEditMode, setIsEditMode] = useState(false);

  return (
    <div>
        <form onSubmit={(b) => setIsEditMode(!isEditMode)}>
            <input type="submit" value="Done" />
        </form>
        <Profile isEditMode={isEditMode} setIsEditMode={setIsEditMode} />
     </div>
  )

}


function Profile(props) {
  if (props.isEditMode) {
    return (
       <div>{returnNormalProfile()}</div>
    )

  return (
      <div>{returnEditableProfile()}</div>
  )
}

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>