Change classname on react component

classnames.jsx

import React from 'react';
import cx from 'classnames';
// yarn add classnames

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.addClassName = this.addClassName.bind(this);
    this.removeClassName = this.removeClassName.bind(this);
    this.state = {
      isActiveClass: false,
    };
  }
  
  addClassName() {
    this.setState({ isActiveClass: true });
  }
  
  removeClassName() {
    this.setState({ isActiveClass: false });
  }
  
  render() {
    const targetClassName = cx('Btn--sm', 'Btn--primary', { 'more-class-name': this.state.isActiveClass });
    
    return (
      <div>
        This is main home
        <p className={targetClassName} >target element</p>
        <button onClick={this.addClassName}>
          Add Class name
        </button>
        <button onClick={this.removeClassName}>
          Remove Class name
        </button>
      </div>
    );
  }
}

justString.jsx

import React from 'react';

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.addClassName = this.addClassName.bind(this);
    this.removeClassName = this.removeClassName.bind(this);
    this.state = {
      isActiveClass: false,
    };
  }
  
  addClassName() {
    this.setState({ isActiveClass: true });
  }
  
  removeClassName() {
    this.setState({ isActiveClass: false });
  }
  
  render() {   
    return (
      <div>
        This is main home
        <p className={`Btn--sm Btn--primary ${this.state.isActiveClass && 'more-class-name'}`} >target element</p>
        <button onClick={this.addClassName}>
          Add Class name
        </button>
        <button onClick={this.removeClassName}>
          Remove Class name
        </button>
      </div>
    );
  }
}

Thank you!

Thank's :)

Thank you :)