olivegroup-gamified1/components/AddNewSection.js

sample des

import React, { Component } from 'react';

import ItemModal from './ItemModal';

class AddNewSection extends Component {
  constructor(props) {
    super(props);
    this.state = { isModalOpen: false };
    this.modalShow = this.modalShow.bind(this);
    this.handleModalHide = this.handleModalHide.bind(this);
  }

  modalShow() {
    this.setState({ isModalOpen: true });
  }

  handleModalHide() {
    this.setState({ isModalOpen: false });
  }
  render() {
    const { isModalOpen } = this.state;
    console.log('isModalShown: ', isModalOpen);
    return (
      <>
        <div className="d-flex justify-content-center align-items-center h-100">
          <a href="#" className="add-new-section" onClick={this.modalShow}>
            <figure className="figure text-center">
              <svg
                width="101"
                height="100"
                viewBox="0 0 101 100"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M47.57 14.844h5.86c.52 0 .78.26.78.781v68.75c0 .52-.26.781-.78.781h-5.86c-.52 0-.78-.26-.78-.781v-68.75c0-.52.26-.781.78-.781z"
                  fill="#A3A6AC"
                />
                <path
                  d="M17.688 46.29h65.624c.521 0 .782.26.782.78v5.86c0 .52-.26.78-.781.78H17.686c-.52 0-.78-.26-.78-.78v-5.86c0-.52.26-.78.78-.78z"
                  fill="#A3A6AC"
                />
              </svg>

              <figcaption className="figure-caption text-center Helvetica-Bold">
                Add New Section
              </figcaption>
            </figure>
          </a>
        </div>

        {/* MODAL SHOW */}
        <ItemModal show={isModalOpen} onHide={this.handleModalHide} />
      </>
    );
  }
}

export default AddNewSection;