React公式ドキュメントを読む17 if文でレンダリングし分ける

function UserGreeting(props) {
  return <h1>おかえりなさい!</h1>;
}

function GuestGreeting(props) {
  return <h1>ログインしてください。</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // trueに変更すると表示が切り替わります
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

class LoginControl extends React.Component {
  // コンストラクタ
  constructor(props) {
	super(props);

  // メソッドをバインド
	this.handleLoginClick = this.handleLoginClick.bind(this);
	this.handleLogoutClick = this.handleLogoutClick.bind(this);

  // isLoggedIn の値を false にして初期化
	this.state = {isLoggedIn: false};
  }

  // クラスメソッド
  handleLoginClick() {
	this.setState({isLoggedIn: true});
  }

  // クラスメソッド
  handleLogoutClick() {
	this.setState({isLoggedIn: false});
  }

  // レンダリング
  render() {
    // 変数 isLoggedIn を宣言して state を代入
    const isLoggedIn = this.state.isLoggedIn;

    // 変数 button を宣言
    let button;

    // isLoggedIn が true か false かで代入する要素を振り分ける
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    /*
    以下の <Greeting isLoggedIn={isLoggedIn} /> の部分は、
    Greeting コンポーネントにisLoggedInを渡すことで、
    Greeting コンポーネントのif文で分岐した値が返ります。
    つまり、<UserGreeting /> か <GuestGreeting /> の一方を表示します。

    その下の {button} の部分は、
    変数 button に代入されている内容を表示します。
    つまり、<LoginButton /> か <LogoutButton /> の一方を表示します。
    */
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

function UserGreeting(props) {
  return <h1>おかえりなさい!</h1>;
}

function GuestGreeting(props) {
  return <h1>ログインしてください。</h1>;
}

// isLoggedIn が true か false かで返す値を振り分ける
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
	return <UserGreeting />;
  }
  return <GuestGreeting />;
}


function LoginButton(props) {
  return (
	<button onClick={props.onClick}>
	  ログイン
	</button>
  );
}

function LogoutButton(props) {
  return (
	<button onClick={props.onClick}>
	  ログアウト
	</button>
  );
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);