Change text color click button in react js

 Change text color in react using click button

Changing text color with click multiple color button

Button.jsx

import React, { useState } from 'react'

const Button = () => {

   

    const [clr, setcolor] = useState("black");

    const [myword, setWord] = useState("Test");

    function my(){

       let green ="#28a745";

       setcolor(green);

       setWord("Green");

    }

    function yellowColor(){

        let yellow ="#ffc107";

        setcolor(yellow);

        setWord("Yellow");

    }

    function RedColor(){

        let red ="#dc3545";

        setcolor(red);

        setWord("Red");

    }

function BlueColor(){

    let blue ="#007bff";

    setcolor(blue);

    setWord("Blue");

}

function GrayColor(){

    let gray ="#6c757d";

    setcolor(gray);

    setWord("Gray");

}

    return(

        <>

        <br/>

        <div class="text-center border rounded m-2 p-3">

        <h3 style={{color:clr}}>{myword}</h3>

        </div>

       

        <div class="border rounded m-2 p-3">

        <button onClick={my} class="btn btn-success">Green</button>

        <button onClick={yellowColor} class="btn btn-warning">Yellow</button>

        <button onClick={RedColor} class="btn btn-danger">Red</button>

        <button onClick={BlueColor} class="btn btn-primary">Blue</button>

        <button onClick={GrayColor} class="btn btn-secondary">Gray</button>

        </div>

        </>

    );

};

export default Button;

App.js

import logo from './logo.svg';

// import './App.css';

import './css/my.css';

import Button from './components/ClickEvents/Button';

var name="123";

function App() {

 

  return (

  <div className='neeraj'>

<Button />

  </div>

  );

}

export default App;