Develop Reference

setState not working in ReactJS GET method

I've been trying to make a navbar for my website that handles log in and logout authentication. To show a log in or logout button based on if the user is either. I have sucessfully retrieved the data I need but I am having trouble rendering and saving it in my Navbar component, it looks like this:
import React from 'react';
class Navbar extends React.Component {
constructor(props){
super(props)
this.state = { loggedin: ''}
this.isLoggedIn = this.isLoggedIn.bind(this)
}
componentDidMount(){
fetch('/user-status', {method: 'GET'}).then(res => res.json()).then(data =>{
this.setState({loggedin: data})
});
}
isLoggedIn(){
fetch('/user-status',{ method: 'GET'})
.then(function (response) {
return response.json();
}).then(function (textie) {
this.setState({loggedin: textie})
return textie;
});
}
render() {
if(this.isLoggedIn == 'true'){
return(
<a className="nav-item nav-link" href="/logout">Logout</a>
);
}
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-primary">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<a className="nav-item nav-link active" href="#">Home <span className="sr-only">(current)</span></a>
<a className="nav-item nav-link" href="/about">About</a>
<a className="nav-item nav-link" href="/signin">Sign in/Sign Up</a>
<a className="nav-item nav-link" href="/profile">My Profile</a>
<a className="nav-item nav-link" href="/leaderboard">Top Forecasts</a>
</div>
</div>
</nav>
);
}
}
export default Navbar;
The /user-status method gets whether or not the user is logged in from Flask backend, and returns either true or false. I try to save it once it changes in isLoggedIn, but I get the error cannot 'setState' on undefined. Also, when it returns textie from isLoggedIn, it returns the statement 'bound isLoggedIn' instead of true or false, and I'm not sure why.
I try to say in the render part that if the loggedin variable is true, there will be a Navbar option to logout, but if there isnt, there will be a navbar option to log in. Any thoughts why this isn't working and this error keeps popping up? I guess what I'd like to know is how to save a fetched data into a react component.

In this line if(this.isLoggedIn == 'true') you are checking if the function isLoggedIn in the this scope is equals to true, but you actually should call to this.state.isloggedIn == 'true' I think.

Try this:
class Navbar extends React.Component {
state = { loggedin: '' };
componentDidMount() {
this.isLoggedIn();
}
isLoggedIn = () => {
fetch('/user-status')
.then((res) => res.json())
.then((data) => this.setState({ loggedin: data }));
};
render() {
if (this.state.loggedin == 'true') {
return (
<a className='nav-item nav-link' href='/logout'>
Logout
</a>
);
}
return (
<nav className='navbar navbar-expand-lg navbar-dark bg-primary'>
<a className='navbar-brand' href='#'>
Navbar
</a>
<button
className='navbar-toggler'
type='button'
data-toggle='collapse'
data-target='#navbarNavAltMarkup'
aria-controls='navbarNavAltMarkup'
aria-expanded='false'
aria-label='Toggle navigation'
>
<span className='navbar-toggler-icon'></span>
</button>
<div className='collapse navbar-collapse' id='navbarNavAltMarkup'>
<div className='navbar-nav'>
<a className='nav-item nav-link active' href='#'>
Home <span className='sr-only'>(current)</span>
</a>
<a className='nav-item nav-link' href='/about'>
About
</a>
<a className='nav-item nav-link' href='/signin'>
Sign in/Sign Up
</a>
<a className='nav-item nav-link' href='/profile'>
My Profile
</a>
<a className='nav-item nav-link' href='/leaderboard'>
Top Forecasts
</a>
</div>
</div>
</nav>
);
}
}
export default Navbar;

change login to logout when login

i'm following a tutorial to make the navbar changes based if the token is stored in the localstorage or not the problem that when i'm logged , the log in link still in the navbar , but i want to have logout
here is my code :
eventbus.js
<script>
import Vue from 'vue'
const EventBus = new Vue()
export default EventBus
</script>
navbar.vue
<template>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded">
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbar1"
aria-controls="navbar1"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item">
<router-link class="nav-link" to="/">Home</router-link>
</li>
<li v-if="auth==''" class="nav-item">
<router-link class="nav-link" to="/login">Login</router-link>
</li>
<li v-if="auth==''" class="nav-item">
<router-link class="nav-link" to="/register">Register</router-link>
</li>
<li v-if="auth=='loggedin'" class="nav-item">
<router-link class="nav-link" to="/profile">Profile</router-link>
</li>
<li v-if="auth=='loggedin'" class="nav-item">
<a class="nav-link" href="" v-on:click="logout">Logout</a>
</li>
</ul>
</div>
</nav>
</template>
<script>
import EventBus from './EventBus'
EventBus.$on('logged-in', test => {
console.log(test)
})
export default {
data () {
return {
auth: '',
user: ''
}
},
methods: {
logout () {
localStorage.removeItem('usertoken')
}
},
mounted () {
EventBus.$on('logged-in', status => {
this.auth = status
})
}
}
</script>
login.vue
<template>
<div class="login-page">
<div class="form">
<form #submit.prevent="login">
<input type="text" name="username" v-model="username" placeholder="Username" />
<input type="password" name="password" v-model="password" placeholder="Password" />
<input type="submit" value="LOG IN">
</form>
</div>
</div>
</template>
<script>
import axios from 'axios'
import router from '../router/index'
import EventBus from '../components/EventBus'
import VueCookies from 'vue-cookies'
export default {
data () {
return {
username: '',
password: ''
}
},
methods: {
login () {
axios.post('http://localhost:3001/login',
{
username: this.username,
password: this.password
}
).then((res) => {
console.log(res.data.token)
if(res.data.status===false){
router.push({ name: 'login' })
} else{
localStorage.setItem('usertoken', res.data.token)
this.username = ''
this.password = ''
router.push({ name: 'showgames'})
}
}).catch((err) => {
console.log(err)
})
this.emitMethod()
},
emitMethod () {
EventBus.$emit('logged-in', 'loggedin')
}
}
}
</script>
i would like to know why the navbar didnt change , thank you for your help

The this.emitMethod() statement should be inside the body of .then(...) and yours is outside.
It is also a good practice to use a beforeDestroy() hook in navbar.vue to remove the event handler or otherwise you will have multiple instances of the handler on multiple component mountings (which is quite often during the development).

React - How to change the props of a child component when an event happens?

I have a component called Nav. I want send props to another component called Body when the user use types in a search bar. The issue I'm having is that the value in the Body component does not change when I type in the search bar.
The Nav class:
constructor(props) {
super(props);
this.state = { id: "" };
this.handleChange = this.handleChange.bind(this);
}
handleChange = event => {
this.setState({ id: event.target.value });
};
render() {
return (
<div>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<a className="navbar-brand" href="#">
<img src="https://icon-icons.com/icons2/1412/PNG/48/comics-spiderman-cam_97492.png" />
Home
</a>
<div className="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
<li className="nav-item active">
<a className="nav-link" href="#">
<span class="sr-only">(current)</span>
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Link
</a>
</li>
<li className="nav-item">
<a
className="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>
Disabled
</a>
</li>
</ul>
<form
className="form-inline my-2 my-lg-0"
onSubmit={() => {
console.log(this.state.id);
}}
>
<input
className="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
value={this.state.id}
onChange={this.handleChange}
/>
<button className="btn btn-light" type="submit">
Search
</button>
</form>
</div>
</nav>
<Body valorId={this.state.id} />
{alert(this.state.id)}
</div>
);
}
The body class:
constructor(props) {
super(props);
this.state = { heroe: null, loading: true };
}
async componentDidMount() {
const url = "https://superheroapi.com/api/2132321/" + this.props.valorId;
console.log("aca va:" + this.props.valorId);
alert(url);
const response = await fetch(url);
const data = await response.json();
console.log(data.name);
this.setState({ heroe: data, loading: false });
}
Thank you.

componentDidMount will only run when the component is first mounted. You could instead move the logic to a separate method and call that both in componentDidMount and in componentDidUpdate when the valorId prop changes.
Example
class Body extends React.Component {
constructor(props) {
super(props);
this.state = { heroe: null, loading: true };
}
componentDidMount() {
this.loadHeroe();
}
componentDidUpdate(prevProps) {
if (this.props.valorId !== prevProps.valorId) {
this.loadHeroe();
}
}
loadHeroe = async () => {
this.setState({ loading: true });
const url = "https://superheroapi.com/api/2132321/" + this.props.valorId;
const response = await fetch(url);
const data = await response.json();
this.setState({ heroe: data, loading: false });
};
render() {
// ...
}
}

The problem is that you use componentDidMount
This function is called one time, at the mount of the component.
Try to use componentDidUpdate instead

Controlling Modals with States and Props

I am trying to use Reactstrap to create modals that pop up when navigated through the nav bar.
My strategy is to change the state in the parent component and pass them as props to the isOpen attribute to control opening the modals.
The problem is changing the props in the child component doesn't re-render components so I am not able to close the modals!
Parent Controller:
class App extends Component {
constructor(props){
super(props);
this.state = {
zipcode : '',
zipEntered: false
};
this.onZipCodeChange = this.onZipCodeChange.bind(this);
this.isAuth = this.isAuth.bind(this);
}
componentDidMount() {
this.setState({signup:false});
if(this.state.zipcode !== '' || this.state.zipcode !== undefined){
this.setState({zipEntered:true});
this.setState({zipcode:this.state.zipcode});
} else {
this.setState({zipcode: '' });
this.setState({zipEntered:false});
}
}
onZipCodeChange(zip){
//console.log('App has detected ZipCode Change: '+zip);
this.setState({zipcode: zip});
this.setState({zipEntered:false});
}
isAuth(token){
console.log("App has token: "+ token);
//pull data from token
}
render() {
return (
<div className="App">
<header>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">InkSpace</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" onClick={() => {this.setState({zipEntered:true})}}>Change Zipcode</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={() => {this.setState({signup:true})}}>Tattooist</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">FAQ</a>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#">Shop</a>
</li>
</ul>
</div>
</nav>
</header>
<ZipCode onSubmit={this.onZipCodeChange} isOpen={this.state.zipEntered} />
<GMap zipcode={this.state.zipcode} />
</div>
);
}
}
export default App;
Child Controller:
class ZipCode extends React.Component {
constructor(props) {
super(props);
this.state = {
zipcode:'' };
this.submitZipCode = this.submitZipCode.bind(this);
this.zipcodeChange = this.zipcodeChange.bind(this);
}
submitZipCode(e){
// console.log('submitting zipcode');
e.preventDefault();
const { onSubmit } = this.props; //pull out to call method it is linked to
onSubmit(this.state.zipcode);
this.setState({isOpen:false});
}
zipcodeChange(e){
this.setState({zipcode: e.target.value});
}
render(){
return(
<div>
<Modal isOpen={this.props.isOpen} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>ZipCode</ModalHeader>
<ModalBody>
<form onSubmit={this.submitZipCode}>
<label>Zip Code</label>
<input
type="input"
name="zipcode"
value={this.state.zipcode}
onChange={this.zipcodeChange}
/>
<Button color="primary" type="submit" className='btn btn-success'>Submit</Button>
</form>
</ModalBody>
</Modal>
</div>
);
}
}
export default ZipCode;

How to import dropdown with autocomplete in the navbar

Im really new in the react and may be my code is very wrong, but how can create a dropdown with autocomplete in the navbar with bootstrap in React JS.
I read too much examples but my code never run..
I try to create dropdown with create-select but I dont know exactly how..
My code:
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import PropTypes from 'prop-types';
import createClass from 'create-react-class';
export default class Header extends Component {
var ValuesAsBooleansField = createClass({
displayName: 'ValuesAsBooleansField',
propTypes: {
label: PropTypes.string
},
getInitialState () {
return {
options: [
{ value: true, label: 'Yes' },
{ value: false, label: 'No' }
],
value: null
};
},
onChange(value) {
this.setState({ value });
console.log('Boolean Select value changed to', value);
},
render () {
return (
<div className="section">
<h3 className="section-heading">{this.props.label} (Source)</h3>
<Select
onChange={this.onChange}
options={this.state.options}
simpleValue
value={this.state.value}
/>
<div className="hint">This example uses simple boolean values</div>
</div>
);
}
});
module.exports = ValuesAsBooleansField;
render() {
return (
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse ">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">WeatherGraph</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Начало <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Времето</a>
</li>
</ul>
</div>
</nav>
);
}
}

You have mixed up the Es5 and Es6 coding style. Just update your code and it's working fine now.
import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
export default class ValuesAsBooleansField extends Component {
constructor(props){
super(props);
this.state = {
options: [
{ value: true, label: 'Yes' },
{ value: false, label: 'No' }
],
value: null
}
this.onChange = this.onChange.bind(this);
}
onChange(event) {
this.setState({value: event.value});
console.log('Boolean Select value changed to', event.value);
}
render () {
return (
<div className="section">
<h3 className="section-heading">{this.props.label} (Source)</h3>
<Select
onChange={this.onChange}
options={this.state.options}
value={this.state.value}
/>
<div className="hint">This example uses simple boolean values</div>
</div>
);
}
}
**************** Paste this code in Header.js file *************
import React, { Component } from 'react';
import ValuesAsBooleansField from './ValuesAsBooleansField';
export default class Header extends Component {
render() {
return (
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse ">
<button class="navbar-toggler navbar-toggler-right"
type="button" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ValuesAsBooleansField />
<a class="navbar-brand" >WeatherGraph</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link">Начало <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link">Времето</a>
</li>
</ul>
</div>
</nav>
);
}
}