JSXのif文、モーダルの追加

変数がtrueのときだけモーダルが表示されるようにする。

　変数modalを用意し、条件分岐を行えば、変数がtrueのときだけJSXが代入される。 　変数に代入するJSXが複数行の場合、JSXを()で囲む。 ※モーダルとは「モーダルウィンドウ」の略。「開いている間は親ウィンドウの操作ができなくなる子ウィンドウ」。

import React from 'react';

class Lesson extends React.Component {
  constructor(props) {
    super(props);
    // stateの初期値をfalseにしておく（最初は閉じた状態になる）
    this.state = {isModalOpen: false};
  }

  render() {
    // 変数modalを定義
    let modal;
    
    // if文を用意
    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'>
              とじる
            </button>
          </div>
        </div>
      );
    }
    
    return (
      <div className='lesson-card'>
        <div className='lesson-item'>
          <p>{this.props.name}</p>
          <img src={this.props.image} />
        </div>
        {/* 変数モーダルを表示 */}
        {modal}
      </div>
    );
  }
}

export default Lesson;

閉じるボタンで、モーダルが閉じるように設定

import React from 'react';

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

  handleClickLesson() {
    this.setState({isModalOpen: true});
  }
  
  // handleClickCloseメソッドを定義
  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>
            {/* とじるボタンを押下したときに閉じるonClickイベントを追加 */}
            <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;