The problem is the title.
I am using:
- Typescript Node
- Typescript React
I am trying to pass a setPage from useState to the subroutine called subRenderSwitch which decides which form to display, while renderSwitch decides which navigation bar to display.
Main App
function App() {
let [page,setPage] = useState("")
let firstRender = useRef(true);
const subRenderSwitch = (str: any) => {
switch (str) {
case 'Login':
return <Landing setPage={setPage} />
case 'Register':
return <Register />
case 'Update Password':
return <UpdatePassword />
default:
return <Landing />
}
}
const renderSwitch = (str: any) => {
switch(str) {
case 'Not Logged':
return {head: <Nav setPage={setPage} />, body: subRenderSwitch(page)}
case 'Logged':
return {head: '', body: ''}
default:
return {head: <Nav setPage={setPage} />, body: subRenderSwitch(page)}
}
}
return (
<div className="App">
{renderSwitch(page).head}
{renderSwitch(page).body}
</div>
);
}
export default App;
export default function Nav ({ setPage }: any) {
let [nav,setNav] = useState('')
const clickHandler = (e: any, str: any) => {
e.preventDefault()
const sendData = async () => {
...
}
sendData().then(res => setNav(res.data.value))
return
}
useEffect(() => {
setPage(nav) // NO ERROR HERE
},[nav,setPage])
const renderSwitch = () => {
switch (nav) {
...
}
}
return (
<div id='navBar'>
{renderSwitch()}
</div>
)
}
export default function Landing ( { setPage }: any ) {
let [message,setMessage] = useState("Enter details to Login")
let [data,setData] = useState({email: '',pass: ''})
let [nav,setNav] = useState('')
let firstRender = useRef(true)
const submitHandler = (e: any) => {
e.preventDefault()
const sendData = async () => {
...
}
sendData().then(res => {
if (res.data != null) {
setMessage("User Found")
setNav('Login')
}
else {
setMessage("User Not Found")
}
})
return
}
useEffect(() => {
if (firstRender.current) {
firstRender.current = false
return
}
setPage(nav) // ERROR CAUSED HERE
},[nav,setPage])
return (
<div id='landingPage'>
...
</div>
)
}
Please know that I am still a newbie and therefore the above may not follow any best practices. Additionally, I will accept any critique that may improve my code.
I can successfully pass setPage to renderSwitch without any trouble, but for subRenderSwitch I get setPage is not a function.
What could be the cause for this error?
