can somebody help me. i just wanna know, after i get the data user from localstorage. the signout button will show up after i refresh the page. can somebody help me pls? thank you
here's the code :
import React, { useEffect, useState } from 'react';
import './header.css';
import { Link } from 'react-router-dom';
const Header = () => {
const [token, setToken] = useState(
localStorage.getItem('user')
? JSON.parse(localStorage.getItem('user')).token
: ''
);
const signOuthandler = (e) => {
localStorage.removeItem('user');
setToken();
};
return (
<nav>
<ul>
{!token && (
<>
<li>
<Link to="/login">
<button>Sing in</button>
</Link>
</li>
<li>
<Link to="/register">
<button>Register</button>
</Link>
</li>
</>
)}
{token && (
<>
<li>
<Link onClick={signOuthandler} to="/login">
<button>Sing Out</button>
</Link>
</li>
</>
)}
</ul>
</nav>
);
};
export default Header;
update your sign out token in 'useEffect',
useEffect(()=>{
setToken(localStorage.getItem('user')
? JSON.parse(localStorage.getItem('user')).token
: '')
},[localStorage.getItem('user')])
Related
I've tried using <a> and <Link to=""> as well but the image is not clickable. Now I've used click events still the image is not clickable. How to make this image clickable and redirect to a webpage?
import '../index.css';
import LinkedinLogo from '../assets/linkedin.png';
// import { Link } from "react-router-dom";
const SocialMedia = () => {
const link= () => {
window.location.href = "https://www.linkedin.com/";
}
return (
<div className="bottom absolute">
{/* <Link to="https://www.linkedin.com/"> */}
<img src={LinkedinLogo} alt="Linkedin logo" onClick={link}/>
{/* </Link> */}
</div>
);
}
export default SocialMedia;
Your code is workable.
What's problem did you get?
export default function App() {
const link = () => {
window.location.href = 'https://www.linkedin.com/'
}
return (
<div>
<div className='bottom absolute'>
<img
alt='Linkedin logo'
onClick={link}
src='https://picsum.photos/200/300'
/>
</div>
</div>
)
}
I am trying to fix the following error:
TypeError: Cannot read property 'isAuthenticated' of undefined
Navbar
E:/smnd/client/src/components/layout/Navbar.js:7
import { logout } from '../../actions/auth';
const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
here is my navbar code and I have already defined my isAuthenticated i have defined it in auth.js reducers file .... the middleware is not working properly
import React, { Fragment } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { logout } from '../../actions/auth';
const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
const authLinks = (
<ul>
<li>
<a onClick={logout} href='#!'>
<i className="fas fa-sign-out-alt"></i>{' '}
<span className="hide-sm">Logout</span>
</a></li>
{/* <li>
<Link to='/profiles'>Developers</Link>
</li>
<li>
<Link to='/dashboard'>
<i className='fas fa-user' />{' '}
<span className='hide-sm'>Dashboard</span>
</Link>
</li>
<li>
<a onClick={logout} href='#!'>
<i className='fas fa-sign-out-alt' />{' '}
<span className='hide-sm'>Logout</span>
</a>
</li> */}
</ul>
);
const guestLinks = (
<ul>
<li>
<Link to='#!'>Developers</Link>
</li>
<li>
<Link to='/register'>Register</Link>
</li>
<li>
<Link to='/login'>Login</Link>
</li>
</ul>
);
return (
<nav className='navbar bg-dark'>
<h1>
<Link to='/'>
<i className='fas fa-code' /> DevConnector
</Link>
</h1>
{!loading && (
<Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
)}
</nav>
);
};
Navbar.propTypes = {
logout: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(
mapStateToProps,
{ logout }
)(Navbar);
**Nav-header.js**
The sidebar should not collapse when I am clicking outside of the page in react js. Please help with that. this is the code I wrote for the side menu. I am a beginner at the react js. Please help
import React, { useState } from 'react'
import * as FaIcons from 'react-icons/fa'
import * as AiIcons from 'react-icons/ai'
import { Link } from 'react-router-dom'
import { SidebarData } from './SidebarData'
import './Navbar.css'
import { IconContext } from 'react-icons'
const Header = () => {
const [sidebar, setsidebar] = useState(false)
const showSideBar = () => setsidebar(!sidebar)
return (
<>
<IconContext.Provider value={{ color: '#1D1D1D' }}>
<div className='navbar'>
<Link to="#" className='menu-bars'>
<FaIcons.FaBars onClick={showSideBar} color="#009540"/>
</Link>
<span className="meny">Meny</span>
</div>
<nav className={sidebar ? 'nav-menu active' : 'nav-menu' } >
<ul className='nav-menu-items' onClick={showSideBar}>
<li className='navbar-toggle'>
<Link to="#" className='menu-bars-logo'>
<AiIcons.AiOutlineClose/>
</Link>
</li>
{SidebarData.map((item, index) => {
return (
<li key={index} className={item.cName}>
<Link to={item.path}>
<span>{item.title}</span>
</Link>
</li>
)
})}
</ul>
</nav>
</IconContext.Provider>
</>
)
}
export default Header
You can use onblur, in react it would look like
return (
<div onBlur={() => {
... do something like setState
}}>
)
I don't know what is wrong. I have tried window.history.back(), window.history.go(-1) and window.history.go(). I have even tried to remove window from them all. The page keeps refreshing and the back button isn't working either. What I want to achieve is ability to go back to previous page(s).
import React from "react"
import { Link, graphql, useStaticQuery} from 'gatsby'
//import './header.module.scss'
import headerStyles from './header.module.scss'
const Header = () => {
const data = useStaticQuery(graphql`
query{
site {
siteMetadata {
title
}
}
}
`)
const navOption = () => {
if( (window.location.pathname === '/') || (window.location.pathname === '/about') || (window.location.pathname === '/blog') || (window.location.pathname === '/contact')){
return (
<ul className={headerStyles.navList}>
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="/">
Home
</Link>
</li>
<li>
<Link className={headerStyles.navItem } activeClassName={headerStyles.activeNavItem} to="/about">
About
</Link>
</li>
<li>
<Link className={headerStyles.navItem } activeClassName={headerStyles.activeNavItem} to="/blog">
Blog
</Link></li>
<li>
<Link className={headerStyles.navItem } activeClassName={headerStyles.activeNavItem} to="/contact">
Contact
</Link>
</li>
</ul>
)
} else {
return (
<ul>
<li><button onClick={window.history.go()}>Back</button></li>
</ul>
)
}
}
return (
<header className={headerStyles.header}>
<h1>
<Link className={headerStyles.title} to="/">
{data.site.siteMetadata.title}
</Link>
</h1>
{ navOption()}
</header>
)
}
export default Header;
I have got a work around this issue with
import { Link, graphql, useStaticQuery, navigate} from 'gatsby'
and as simple as this
<button onClick={() => {navigate(-1)}}>Back</button>
Thanks to you all
I have a simple Gatsby site using two languages. In the header component, there is a link to the second language, when clicking on it, that language becomes the selected one and the other must appear as an option. Everything works but does not load these changes without refreshing the page. What am I doing wrong? Here is my code:
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import AnchorLink from "react-anchor-link-smooth-scroll"
import Logo from "../images/logo.svg"
const path = window.location.pathname;
const Header = ({ siteTitle }) => {
return (
<>
<header>
<div className="container">
<div className="nav-links">
<Link to="/" className="logo">
<Logo />
</Link>
<div className="wrapper">
<AnchorLink href="#contact" className="nav-item contact">
Contact us
</AnchorLink>
</div>
<AnchorLink className="button button--sm" href="#contact">
Contact
</AnchorLink>
{path === '/' && (
<Link to='/de' className="nav-item">
DE
</Link>
)}
{path === '/de' && (
<Link to='/' className="nav-item">
EN
</Link>
)}
</div>
</div>
</header>
</>
)
}
Header.propTypes = {
siteTitle: PropTypes.string,
}
Header.defaultProps = {
siteTitle: ``,
}
export default Header
I believe you should put the path variable inside the Header component so that it is re-evaluated on each render.
const Header = ({ siteTitle }) => {
const path = window.location.pathname;
return (
<>
<header>