Hе пришли props от родителя. Почему?

Question

[Zhanna_K]

Есть контейнерная компонента

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);

и презентационная

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>
  );
};

Вот что выводится в консоль:


Почему если у родителя значение true>, у дочернего оно стало undefined?

Answer 1

[Сергей Зенькович]

У вас опечатка в коде. В контейнерной написано isLoggedIn а в презентационной isLoggenIn

Comments

[Zhanna_K]

Спасибо, добрый человек!!! Как всегда глаз замыливается и часами ищу ошибку!

[abberati]

Zhanna_K, попробуйте освоить typescript. Одна из его замечательных особенностей – он явно указывает на ошибки и опечатки до запуска приложения.

[Zhanna_K]

abberati, обязательно в перспективе буду осваивать. Но для начала нужно разобраться с javascript)