How can I use 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}}}]}`}
>