title: template literals in jsx
body: <p>I want to use this but props</p>
  <pre><code>&lt;section class=&quot;slider&quot; data-slick='{&quot;slidesToShow&quot;: 3,&quot;autoplay&quot;: true,  &quot;responsive&quot;: [{&quot;breakpoint&quot;:600,&quot;settings&quot;:{&quot;slidesToShow&quot;: 2}}]}'&gt;
  </code></pre>
  <p>which should give</p>
  <pre><code>&lt;section class=&quot;slider&quot; data-slick='{&quot;slidesToShow&quot;:${props.number},&quot;autoplay&quot;: ${props.autoplay},  &quot;responsive&quot;: [{&quot;breakpoint&quot;:${props.breakpoint},&quot;settings&quot;:{&quot;slidesToShow&quot;: ${props.show}}}]}'&gt;
  </code></pre>
  <p>but as it's inside quote I try to use
  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals" rel="noreferrer">Template literals</a> with <a href="https://babeljs.io/docs/plugins/transform-es2015-template-literals/" rel="noreferrer">babel</a></p>
  <p>like this</p>
  <pre><code>&quot;babel&quot;: {
      &quot;presets&quot;: [
        &quot;es2015&quot;,
        &quot;stage-3&quot;
      ],
      &quot;plugins&quot;: [
        &quot;transform-object-rest-spread&quot;,
        [
          &quot;transform-react-jsx&quot;,
          {
            &quot;pragma&quot;: &quot;wp.element.createElement&quot;
          }
        
      ],[&quot;transform-es2015-template-literals&quot;]
      ]
    }
  </code></pre>
  <p>but it didn't get the value of my props it just send it like a quote.</p>
  <p>How should I use transform-es2015-template-literals to get my props value inside this quote</p>