template literals in jsx

Question

I want to use this but props

<section class="slider" data-slick='{"slidesToShow": 3,"autoplay": true,  "responsive": [{"breakpoint":600,"settings":{"slidesToShow": 2}}]}'>

which should give

<section class="slider" data-slick='{"slidesToShow":${props.number},"autoplay": ${props.autoplay},  "responsive": [{"breakpoint":${props.breakpoint},"settings":{"slidesToShow": ${props.show}}}]}'>

but as it's inside quote I try to use Template literals with babel

like this

"babel": {
    "presets": [
      "es2015",
      "stage-3"
    ],
    "plugins": [
      "transform-object-rest-spread",
      [
        "transform-react-jsx",
        {
          "pragma": "wp.element.createElement"
        }
      
    ],["transform-es2015-template-literals"]
    ]
  }

but it didn't get the value of my props it just send it like a quote.

How should I use transform-es2015-template-literals to get my props value inside this quote

Answer 1

You don't need to add the plugin to transform them, it's your syntax which is wrong.

You need to use backticks: ` instead of regular ticks (apostrophe): ' . And use curly brackets around that.

<section 
    class="slider" 
    data-slick={`{"slidesToShow":${props.number},"autoplay": ${props.autoplay},  "responsive": [{"breakpoint":${props.breakpoint},"settings":{"slidesToShow": ${props.show}}}]}`}
>

Answer 2

You'll need to put curly brackets around the template string in order to break out of jsx and back into regular javascript. Also, the template string uses the back tick character (on the top left of a US qwerty keyboard) instead of a single quote:

<section class="slider" data-slick={`{"slidesToShow":${props.number},"autoplay": ${props.autoplay},  "responsive": [{"breakpoint":${props.breakpoint},"settings":{"slidesToShow": ${props.show}}}]}`}>