creating reusable component is reactjs how to create a button class and use it for different project as a reusable component

working link

https://stackblitz.com/edit/react-qjonsv?file=index.js

code is below:--

import React, { Component } from 'react';

import { render } from 'react-dom';

import Hello from './Hello';

import './style.css';

//a button class

class GTbutton extends Component

{

constructor(props)

{

super(props);

}

PointerDown()

{

this.props.buttonClick();

}

render()

{

return(

<div >

<button class="button" onClick={this.click=()=>

{

this.PointerDown();

}} style={{background:this.props.color}}>{this.props.label}</button>

</div>

);

}

}

class App extends Component {

constructor() {

super();

this.state = {

name: 'React'

};

}

handleClick()

{

console.log("ok i am clicked here")

}

render() {

return (

<div>

<GTbutton color="orange" label="This button is clicked" buttonClick={()=>{

this.handleClick();

}}></GTbutton>

<GTbutton color="green" label="This button is clicked" buttonClick={()=>{

this.handleClick();

}}></GTbutton>

<GTbutton color="pink" label="This button is clicked" buttonClick={()=>{

this.handleClick();

}}></GTbutton>

<GTbutton color="black" label="This button is clicked" buttonClick={()=>{

this.handleClick();

}}></GTbutton>

</div>

);

}

}

render(<App />, document.getElementById('root'));