React.js setState not working. Problem with rendering

Question

I have a problem with hidding login and registration after logging in

After logging in I setState check: true , hen, by clicking on the logout button,I want to setstate check: false - but unfortunately it does not work.

Before I tried to setState in Navigation.js but after clicking logout button SignIn/Registration shows maybe for 0.01 second and still I can see just logout button Please help, Thank you in advance !

This is my code

Navigation.js

import React, { Component } from "react";
import "./Navigation.css";
import { Nav, Navbar } from "react-bootstrap";
import axios from 'axios'
export default class Navigation extends Component {
  state = {

    button: []
  }



  render() {

    let buttons

    if (this.props.check) {
      buttons = (
        <Nav className="mr-auto">
          <Nav.Link href="\signin" onClick={() => {
            localStorage.removeItem('jwt')
            this.setState({
              check: false
            })
          }
          }>Logout</Nav.Link>

        </Nav>
      )
    }
    else if (!this.props.check) {
      buttons = (
        <Nav className="mr-auto">
          <Nav.Link href="\signin">Sign In</Nav.Link>
          <Nav.Link href="\register">Register</Nav.Link>
        </Nav>
      )
    }
    return (
      <Navbar
        className="NavbarContainer"
        collapseOnSelect
        expand="lg"
        bg="light"
        variant="light"
      >
        <Navbar.Brand href="\">
          LOGO
          {/* <Nav.Link href="\">LOGO</Nav.Link> */}
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          {/* <Nav className="mr-auto">
            <Nav.Link href="\signin">Sign In</Nav.Link>
            <Nav.Link href="\register">Register</Nav.Link>
          </Nav> */}
          {buttons}
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

and App.js

import React, { Component } from "react";
import {
  BrowserRouter,
  BrowserRouter as Router,
  Route,
  Switch,
} from "react-router-dom";
import axios from "axios";

import Navigation from "./components/Navigation/Navigation";

export default class App extends Component {
  state = {
    user: [],
    check: false,
  };

  async componentDidMount() {

    axios.get("http://localhost:8002/users/me", {
      headers: {
        Authorization: `Bearer ` + localStorage.getItem("jwt"),
      },
    })
      .then((res) => {
        this.setState({
          user: res.data,
          check: true,
        })

        console.log(res.data);
      })
      .catch((err) => {
        console.log("error nie dziala" + err);
      });
  }

  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <Navigation user={this.state.user, this.state.check} />
          <section className="mainContainer">
            <Router>
              <Switch>
                <Route exact path="/" component={Home}></Route>
                <Route path="/register" component={Register}></Route>
                <Route path="/signin_user" component={SignInAsUser}></Route>
                <Route
                  path="/signin_specialist"
                  component={SignInAsSpecialist}
                ></Route>

                <Route
                  path="/user_registration"
                  component={RegisterUser}
                ></Route>

                <Route
                  path="/specialist_registration"
                  component={RegisterSpecialist}
                ></Route>

                <Route
                  path="/search_for_specialist"
                  component={SearchForSpecialist}
                ></Route>
                <Route
                  path="/activespecialists"
                  component={ActiveSpecialists}
                ></Route>

                <Route
                  path="/specialist_account"
                  component={SpecialistAccount}
                ></Route>
                <Route path="/signin" component={SignIn}></Route>
                <Route
                  path="/user"
                  component={() => <UserAccount user={this.state.user} />}
                ></Route>
                <Route path="/specialist" component={SpecialistAccount}></Route>
                <Route
                  path="/activeSpecialist"
                  component={SpecialistAccount}
                ></Route>
                <Route component={NoMatch}></Route>
              </Switch>
            </Router>
          </section>
          <Footer />
        </BrowserRouter>
      </div>
    );
  }
}

seems like you conditional render in the Navigation is based on the ```this.props.check```, but you are setting the check locally in the Navigation component. Shouldn't it be ```this.state.check```? — szczocik, Sep 25 '20 at 13:44

score 0 · Answer 1 · answered Sep 25 '20 at 14:38

It's not working because you are updating a state in your Navigation which holds only a button array, and not check status. You should update your parent state from your child. You can do this by passing you parent setState function to child, for example. There are a few similar questions here, try looking here, for example: How to update parent's state in React?

Or you could implement some global state.

React.js setState not working. Problem with rendering

1 Answers1