CODEWITHSUNDEEP
reactjsstatelifecycle
Anna Lee
Anna Lee

Reputation: 951

Parent's state is not passed to Child properly

Could I ask a very simple question, why App state is not passed to props of Child1? From following code, Child1 component should show isLoggedIn of App in the p tag, however it does not show it. Could you give some advice for it?

App.js

import React, { Component } from "react";
import "./App.css";
import Child1 from "./Child1";

class App extends Component {
  constructor() {
    super();
    this.state = {
      isLoggedIn: false
    };
  }

  componentDidMount() {
    this.loginId = setInterval(() => {
      var loggedIn = Math.random() >= 0.5 ? true : false;
      this.setState({ isLoggedIn: loggedIn });
      console.log(this.state.isLoggedIn, "isLoggedIn");
    }, 3000);
  }

  render() {
    return (
      <div className="App">
        <Child1 isLoggedIn={this.state.isLoggedIn} />
      </div>
    );
  }
}

export default App;

Child1.js

import React, { Component } from "react";

class Child1 extends Component {
  render() {
    return (
      <div>
        <h1> Child 1 </h1>
        <p>Currently LoggedIn is {this.props.isLoggedIn}</p>
      </div>
    );
  }
}

export default Child1;

My react version informations are following.

"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"

enter image description here

Upvotes: 1

Views: 65

Answers (1)

Tom Mendelson
Tom Mendelson

Reputation: 625

bool can't be presented. you can just do something like this:

    <p>Currently LoggedIn is {this.props.isLoggedIn.toString()}</p>

Upvotes: 1

Related Questions