Невозможно добавить имя класса к компоненту кнопки при рендеринге в DOM

Question

Не могли бы вы взглянуть на этот фрагмент и сообщить мне, почему я не могу передать имя класса .btn-primary, используя

<Button styleClass="btn-primary" text='Primary Button' />

, после запуска я вижу ${styleClass} вэлемент в инспекторе вместо имени класса

const Button = ({ styleClass, text }) => {
  return (
    <button
      type="button"
      className={'btn ${styleClass}'}
    >
      {text}
    </button>
  );
};
ReactDOM.render(
               <div>
                 <Button styleClass="btn-primary" text='Primary Button' />
               </div>
, window.root);

body{
padding:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="root"></div>

Answer 1

Изменены ' символы на символы обратной галочки `( серьезный акцент ) для строки литералов шаблона интерполяция с использованием ${}:

const Button = ({ styleClass, text }) => {
  return (
    <button
      type="button"
      className={`btn ${styleClass}`}
    >
      {text}
    </button>
  );
};
ReactDOM.render(
  <div>
    <Button styleClass="btn-primary" text='Primary Button' />
  </div>
, window.root);

body{
  padding: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="root"></div>

Или без интерполяции строк:

const Button = ({ styleClass, text }) => {
  return (
    <button
      type="button"
      className={'btn ' + styleClass }
    >
      {text}
    </button>
  );
};

Надеюсь, это поможет!