I need a button color to change onClick multiple times for example from red to blue , blue to green and more but cannot determine how to do

Index.js

import React from ‘react’;
import { render } from ‘react-dom’;
import Hello from ‘./Hello’;
import MyButton from ‘./MyButton’;

const styles = {
fontFamily: ‘sans-serif’,
textAlign: ‘center’,

};
const bStyle = {
textAlign: ‘center’,
BackgroundColor: ‘red’,
};
let colors = [‘red’, ‘blue’, ‘green’,];

class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
state = {
colorIndex: 0,
}

handleClick(e){
this.setState ({
colorIndex: 1,
})
}

render() {
return (



Start editing to see some magic happen {’\u2728’}






);
}
}

render(, document.getElementById(‘root’));

MyButton.js

import React from ‘react’;
import {
Button,
ButtonToolbar,

} from ‘react-bootstrap’;

export default class MyButton extends React.Component {
render() {
return (

{/* Standard button */}

   <Button
       onClick={this.props.onClick} 
    style={{ backgroundColor: this.props.color }}>
       {this.props.name}
   </Button>

  </ButtonToolbar>

);

}
}