React入門 if (真偽値)でモーダル表示非表示を制御するif文について質問です。

Question

React入門の練習問題をやっています。
Webページ内のボタンクリックでモーダルを表示させ、モーダルのカード内の「閉じる」ボタンで今度はモーダルを非表示にします。だいたいの流れは理解できたのですが、1点だけ　「おや？」と思うところがあります。

 if (this.state.isModalOpen) {
      modal = (　

この文は　「もし、isModalOpenがtrueならば、modalに値が代入される」という役割になっています。
代入される値は<div>～</div>で、ここにモーダルが記述されています。

if (this.state.isModalOpen)　は　if (this.state.isModalOpen: true)ではないのでしょうか？
どう理解していったらいいのでしょうか？
何かいい理解方法を教えていただけると幸いです。

全体のコードは以下のとおりです。

import React from 'react';

class Lesson extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isModalOpen: false};
  }

  handleClickLesson() {
    this.setState({isModalOpen: true});
  }
  
  handleClickClose() {
    this.setState({isModalOpen: false});
  }

  render() {
    let modal;
    if (this.state.isModalOpen) {
      modal = (
        <div className='modal'>
          <div className='modal-inner'>
            <div className='modal-header'></div>
            <div className='modal-introduction'>
              <h2>{this.props.name}</h2>
              <p>{this.props.introduction}</p>
            </div>
            <button
              className='modal-close-btn'
              onClick={() => {this.handleClickClose()}}
            >
              とじる
            </button>
          </div>
        </div>
      );
    }

    return (
      <div className='lesson-card'>
        <div
          className='lesson-item'
          onClick={() => {this.handleClickLesson()}}
        >
          <p>{this.props.name}</p>
          <img src={this.props.image} />
        </div>
        {modal}
      </div>
    );
  }
}

export default Lesson;

Comments

[hoshi-takanori]

if (this.state.isModalOpen: true) は文法エラーですね。
this.setState({isModalOpen: true}); と混同されてるのでは？

[退会済みユーザー]

あ、わかりました。
この場合、
if (this.state.isModalOpen)のthis.state.isModalOpenは、this.stateのプロパティにisModalOpenが入ったらなら．．．の意で使われてるってことですね。
いったん、isModalOpenで<div>～</div>を代入させるけれど、デフォルトで非表示で、
表示の条件が、「return」の戻り値にある「onClick={() => {this.handleClickLesson()}}」だということですね。
ちょっとすっきりしました。
ありがとうございます。

[george]

> this.state.isModalOpenは、this.stateのプロパティにisModalOpenが入ったらなら．．．の意で使われてるってことですね。

isModalOpenの初期値にはfalseが入っているので、isModalOpenにtrueが入ったならだと思います。
booleanに関して調べてみたら良いと思いました。

[退会済みユーザー]

わかりました。調べてみます。

Answer 1

this.setState({isModalOpen: true}); と勘違いしてました。