How to use button to pop up video window(ReactJs) - reactjs

Question

i'm trying to make a button that use the same style but want to use it for two button (1) go to some page (2) to pop up a video trailer. but both of them do the action (1). I don't know how to make these two button do different job.
here is the code for Button,
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
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={Button.props.action} className='btn-mobile'>
<button
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
onClick={onClick}
type={type}
>
{children}
</button>
</Link>
);
};
here is the code for two buttons
function HeroSection() {
return (
<div className='hero-container'>
<video src='/videos/animated-banner.mp4' autoPlay loop muted playsInline/>
<h1>TITLE</h1>
<p> simple text.</p>
<div className='hero-btns'>
<Button
className='btns'
buttonStyle='btn--outline'
buttonSize='btn--large'
>
GET STARTED
</Button>
<Button
className='btns'
buttonStyle='btn--primary'
buttonSize='btn--large'
onClick={console.log('hey')}
>
WATCH TRAILER <i className='far fa-play-circle' />
</Button>
</div>
</div>
);
}
export default HeroSection;

Answer 1

you can use onClick event for different jobs.
<Button
className='btns'
buttonStyle='btn--outline'
buttonSize='btn--large'
onClick={() => {
// ...go to some page...
}}
>
GET STARTED
</Button>
<Button
className='btns'
buttonStyle='btn--primary'
buttonSize='btn--large'
onClick={() => {
// ...open pop up...
}}
>
WATCH TRAILER <i className='far fa-play-circle' />
</Button>

Answer 2

IMO, I think you could add new props to and conditionally use tag either Link or button by checking that props. If you pass value to props to then will be rendered as Link, else as button
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];
const SIZES = ['btn--medium', 'btn--large']
export const Button = ({
children,
type,
onClick,
buttonStyle,
buttonSize,
to
}) => {
const checkButtonStyle = STYLES.includes(buttonStyle)
? buttonStyle
: STYLES[0];
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
const ActionTag = to ? Link : 'button';
return (
<ActionTag
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
onClick={onClick}
type={type}
to={to}
>
{children}
</ActionTag>
);
};
and you could use that component like this.
If it's used to navigate to other page, pass value to props to
For popping up a video trailer pass props onClick
<Button
className='btns'
buttonStyle='btn--outline'
buttonSize='btn--large'
onClick={
// do something
}
>
pop up
</Button>
<Button
className='btns'
buttonStyle='btn--primary'
buttonSize='btn--large'
to="/"
>
go to home
</Button>