How can I use template literals in JSX?

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": ${}}}]}'>

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

like this

"babel": {
    "presets": [
    "plugins": [
          "pragma": "wp.element.createElement"

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


  • 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.

        data-slick={`{"slidesToShow":${props.number},"autoplay": ${props.autoplay},  "responsive": [{"breakpoint":${props.breakpoint},"settings":{"slidesToShow": ${}}}]}`}