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.
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)
}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>
)
}