is their any possible way to change the state of header that track the user is logged in or not and show the button as per it if login in then show add to cart and if not show login
i have checked the session storage where i have stored my data if their is data change the state if not don't in component did mount but the component did mount will not re render the app we have to do manual refresh how to keep track of it
import React from 'react';
import { NavLink } from 'react-router-dom';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
class Header extends React.Component {
state = {
login: false
}
componentDidMount() {
const data = sessionStorage.getItem("login");
if (data) {
this.setState({ login: !this.state.login })
}
}
componentDidUpdate(prevProps, prevState) {
if (prevState.login !== this.state.login) {
this.setState({ login: true })
}
}
render() {
return (
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<NavLink to="/" >Home</NavLink>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<LinkContainer to="/shop">
<NavItem eventKey={1}>Shop</NavItem>
</LinkContainer>
</Nav>
<Nav pullRight>
{this.state.login ?
<LinkContainer to="/addtocart">
<NavItem eventKey={1}>Add To cart</NavItem>
</LinkContainer>
:
<LinkContainer to="/login">
<NavItem eventKey={1}>Login</NavItem>
</LinkContainer>
}
<LinkContainer to="/signip">
<NavItem eventKey={1}>Sigup</NavItem>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
}
export default Header;
and in login
import React from 'react';
import { FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
import { UserData } from '../../PostData';
import { ClipLoader } from 'react-spinners';
import { Redirect } from 'react-router-dom'
class Login extends React.Component {
state = {
username: undefined,
email: undefined,
loading: false,
redirect: false
}
onSubmit = (e) => {
e.preventDefault();
this.setState({ loading: true });
if (this.state.email && this.state.email !== '') {
try {
UserData(this.state.username, this.state.email).then(result => {
this.setState({ loading: false })
if (result.length) {
sessionStorage.setItem("login", JSON.stringify(result));
this.setState({ redirect: true })
} else {
alert("please enter the write email and username");
}
})
}
catch (e) {
console.log(e)
}
} else {
console.log("black")
}
}
onChangeHandle = (e) => {
this.setState({ [e.target.name]: e.target.value })
}
render() {
if (this.state.redirect) {
return <Redirect to="/" />
}
return (
<div>
<div style={{ position: 'absolute', top: '20%', left: '50%', zIndex: '111111' }}>
<ClipLoader
sizeUnit={"px"}
size={150}
color={'#123abc'}
loading={this.state.loading}
/>
</div>
<div className="container">
<form onSubmit={this.onSubmit}>
<FormGroup
controlId="formBasicText"
// validationState={this.getValidationState()}
>
<ControlLabel>username</ControlLabel>
<FormControl
type="text"
placeholder="Enter username"
name="username"
onChange={this.onChangeHandle}
/>
<FormControl.Feedback />
<ControlLabel>Email</ControlLabel>
<FormControl
type="text"
name="email"
placeholder="Enter email"
onChange={this.onChangeHandle}
/>
<FormControl.Feedback />
<input type="submit" className="btn btn-primary" value="login"></input>
</FormGroup>
</form>
</div>
</div>
)
}
}
export default Login;
`
import React from 'react';
import { FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
import { UserData } from '../../PostData';
import { ClipLoader } from 'react-spinners';
import { Redirect } from 'react-router-dom'
class Login extends React.Component {
state = {
username: undefined,
email: undefined,
loading: false,
redirect: false
}
onSubmit = (e) => {
e.preventDefault();
this.setState({ loading: true });
if (this.state.email && this.state.email !== '') {
try {
UserData(this.state.username, this.state.email).then(result => {
this.setState({ loading: false })
if (result.length) {
sessionStorage.setItem("login", JSON.stringify(result));
this.setState({ redirect: true })
} else {
alert("please enter the write email and username");
}
})
}
catch (e) {
console.log(e)
}
} else {
console.log("black")
}
}
onChangeHandle = (e) => {
this.setState({ [e.target.name]: e.target.value })
}
render() {
if (this.state.redirect) {
return <Redirect to="/" />
}
return (
<div>
<div style={{ position: 'absolute', top: '20%', left: '50%', zIndex: '111111' }}>
<ClipLoader
sizeUnit={"px"}
size={150}
color={'#123abc'}
loading={this.state.loading}
/>
</div>
<div className="container">
<form onSubmit={this.onSubmit}>
<FormGroup
controlId="formBasicText"
// validationState={this.getValidationState()}
>
<ControlLabel>username</ControlLabel>
<FormControl
type="text"
placeholder="Enter username"
name="username"
onChange={this.onChangeHandle}
/>
<FormControl.Feedback />
<ControlLabel>Email</ControlLabel>
<FormControl
type="text"
name="email"
placeholder="Enter email"
onChange={this.onChangeHandle}
/>
<FormControl.Feedback />
<input type="submit" className="btn btn-primary" value="login"></input>
</FormGroup>
</form>
</div>
</div>
)
}
}
export default Login;
`
