Props did not come from the parent. Why?

Question

React

I have a container component

const HeaderContainer = (props) => {
  console.log("header  container props", props.isLoggedIn);
  return <Header isLoggedIn={props.isLoggedIn} />;
};

const mapStateToProps = (state) => {
  return {
    isLoggedIn: Boolean(state.Session.id),
  };
};
export default connect(mapStateToProps, null)(HeaderContainer);

and presentation

const Header = (props) => {
  console.log("header props", props.isLoggenIn);
  return (
    <div className={s.header}>
      {props.isLoggenIn ? (
        <span>
          <a href='/auth' onClick={() => logoutUser()}>
            <span>Log Out</span>
          </a>
        </span>
      ) : (
        <div>Log in </div>
      )}
    </div>
  );
};

Here's what's printed to the console:


Why is it that if the parent value is true>, the child's value is undefined ?

Answer 1

You have a typo in your code. The container one says isLoggedIn and the presentation one says isLoggenIn