I am building a login and logout system for a react project of mine. I have a navbar setup and I am using react-redirect-dom to create links and redirect links to different pages in order to manage the login system.
In the current project, I have a route that does the processing for the login in the login component. I have another link that processes the signup within the signup component.
For the logout, If a user is logged in and they use the /logout endpoint, I want it to immediately call the handleLogout function and log the user out and reroute to the / endpoint
Here is the code I have and the error:
function App() {
const [loggedIn, setLoggedIn] = useState(false)
const [currentUser, setCurrentUser] = useState('')
function handleLogout() {
console.log('handle logout')
axios.post('/api/auth/logout', {
"username":currentUser.username,
"password":currentUser.password,
})
.then((data) => {
console.log(data.data)
setCurrentUser(data.data)
setLoggedIn(false)
return(<Navigate to='/' />)
})
.catch((err) => {
console.log(err)
})
}
return (
<div className="App">
{/* <ContentContext value={contentContextValue}> */}
<BrowserRouter>
<Routes>
<Route exact path="/" element={loggedIn ? <Feed/> : <Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser}/>} />
<Route exact path="/login" element={<Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser}/>}/>
<Route exact path="/signup" element={<Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser}/>}/>
<Route exact path="/logout" element={loggedIn ? () => {handleLogout()} : <Login/>}/>
</Routes>
</BrowserRouter>
{/* </ContentContext> */}
</div>
);
}
Here is the error:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
