I've built 2 functions that return JSX content and then i made some logic to return each function once based on the user choice:
const Register = () =>{
const [value, setMyValue] = useState()
function Zeff(){
return(
<div>
<h1>Hello Zeff!</h1>
</div>
)
}
function Jerry(){
return (
<div>
<h1>Hello Jerry!</h1>
</div>
)
}
const Choice = () =>{
if (value){
return <Zeff />
}else{
return <Jerry />
}
}
return(
<div>
<Navbar />
<select onChange={(e)=>{setMyValue(e.target.value)}} class="form-select" aria-
label="Default select example">
<option value="false">Jerry</option>
<option value="true">Zeff</option>
</select>
<Choice />
</div>
</div>
)
}
export default Register
My problem is when i load the page it shows up the "Hello Jerry!" and when i choose Zeff in the select tag it also changes correctly to "Hello Zeff!" but once i go back again to Jerry it remains "Hello Zeff!"
