Dynamically change variant of a react-bootstrap Button?

Question

how can I dynamically change the variant of a react-bootstrap button? https://react-bootstrap.github.io/components/buttons/

// highlight button with correct answer
    var button = document.getElementsByTagName("button");
    for (var i = 0; i < button.length; i++) {
      if (button[i].innerHTML === this.state.question.answer) {
        //How to do that?
        react-bootstrap.Button btn = button[i];
        btn.variant = "success";
      }
    }
  }

Thanks and kind regards

Update with solution options: Option 1 do not change the variant, simply add css class with CSS The !important rule.

// highlight button with correct answer
        var button = document.getElementsByTagName("button");
        for (var i = 0; i < button.length; i++) {
          if (button[i].innerHTML === this.state.question.answer) {
            //How to do that?
            button[i].classList.add("btn-correct");
          }
        }
      }

Option two use props and state:

   <div>
          <DynamicButton btnVariant={this.state.btnVariant} content="Primary" />
        </div>
        <div>
          <Button variant="secondary" onClick={this.changePrimaryButton}>Secondary</Button>
        </div>
    
    changePrimaryButton = () => {
    console.log("change Button");
    this.setState({ btnVariant: "success" });
  }

Component outside of class:

export const DynamicButton = (props) => {
  return (<Button variant={props.btnVariant}>{props.content}</Button>);
}

Answer 1

You can dynamically pass the variant from the parent component to this DynamicButton component.

const DynamicButton = (props) => {
  return <Button variant={props.variant}>{props.content}</Button>;
}

This is how you can call this component.

<>
  <DynamicButton variant="primary" content="Primary" />
</>

Please import the respective Components.