How can I add a modal to an existing button in react?

0
votes

I have an existing button.js class that is being used on the homepage of my site. I want to add a modal that opens a video to the existing button. Excuse me for being a noob but I just started with react. Any help is much appreciated.

button.js

import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
import videoModal from './videoModal';

const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];

const SIZES = ['btn--medium', 'btn--large'];

export const Button = ({
  children,
  type,
  onClick,
  buttonStyle,
  buttonSize
}) => {
  const checkButtonStyle = STYLES.includes(buttonStyle)
    ? buttonStyle
    : STYLES[0];

  const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];

  return (
    <Link to= '<videoModal/>' className='btn-mobile'>
      
      <button
        className={`btn ${checkButtonStyle} ${checkButtonSize}`}
        onClick={onClick}
        type={type}
      >
        {children}
      </button>
    </Link>
  );
};

HeroSection.js

import React from 'react';
import '../App.css';
import { Button } from './Button';
import './HeroSection.css';

function HeroSection() {
  return (
    <div className='hero-container'>
      <video src='/videos/video-2.mp4' autoPlay loop muted />
      <h1>React Site Test</h1>
      <p>
       Welcome!
      </p>
      <div className='hero-btns'>
        <Button
          className='btns'
          buttonStyle='btn--outline'
          buttonSize='btn--large'
        >
          Request a Quote
        </Button>
        <Button
          className='btns'
          buttonStyle='btn--primary'
          buttonSize='btn--large'
          onClick={console.log('hey')}
        >
          WATCH TUTORIAL <i className='far fa-play-circle' />
        </Button>
      </div>
    </div>
  );
}

export default HeroSection;

This is the videomodal class that I tried to build

videoModal.js

import React, { Component } from "react";
import ModalVideo from "react-modal-video";
import "react-modal-video/scss/modal-video.scss";

export class videoModal extends Component {
  constructor() {
    super();
    this.state = {
      isOpen: false,
    };
    this.openModal = this.openModal.bind(this);
  }

  openModal() {
    this.setState({ isOpen: true });
  }
  render() {
    return (
      <div>
        <div>
          <ModalVideo
            channel="youtube"
            isOpen={this.state.isOpen}
            videoId="O6AxxYhCxeQ"
            onClose={() => this.setState({ isOpen: false })}
          />
          
        </div>
      </div>
    );
  }
}

export default videoModal;

Essentially what I'm trying to do is add the modal to the 'watch tutorial' button but I cant for the life of me figure it out

javascriptreactjs