Changing style of a button on click : <p>Is it possible to change <code>background-color</code> of my button <code>onClick</code> function?</p>

<p>ex. click <code>background-color: black</code>, another click <code>background-color: white</code> </p>

<p>I've tried something like <code>this.style</code>, no result.</p>

<p>I've managed to get overlay working and insert needed data inside of it.
But didn't managed to find any post that could help me.
I am using react-bootstrap.
This is my code.</p>

<pre><code>  const metaDataOverlay = (
  &lt;div&gt;
  &lt;style type="text/css"&gt;{`
  .btn-overlay {
    background-color: white;
    margin-right: -15px;
    margin-left: -15px;
    padding-bottom: -20px;
    padding: 0;
  }
  `}&lt;/style&gt;

      &lt;ButtonToolbar&gt;
        &lt;ButtonGroup&gt;
        &lt;OverlayTrigger trigger={['hover', 'focus']} placement="left" overlay={popoverHoverFocus}&gt;
          &lt;Button bsStyle="overlay" onClick={ clicked } onKeyPress={ keypress }&gt;
            &lt;div className={bemBlocks.item().mix(bemBlocks.container("item"))} data-qa="hit"&gt;
              &lt;a href={url} onClick={(e)=&gt;{e.preventDefault(); console.log("123")}}&gt;
                &lt;div&gt;
                  &lt;img data-qa="poster" className={bemBlocks.item("poster")} src={result._source.poster} width="240" height="240"/&gt;
                &lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/Button&gt;
        &lt;/OverlayTrigger&gt;
        &lt;/ButtonGroup&gt;
      &lt;/ButtonToolbar&gt;

    &lt;/div&gt;
  )
</code></pre>
