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

Looks like instead of a template literal, you should be using `JSON.stringifiy` anyway — Bergi, Apr 09 '18 at 14:39

score 24 · Accepted Answer · answered Apr 09 '18 at 14:28

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}}}]}`}
>

score 5 · Answer 2 · answered Apr 09 '18 at 14:27

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}}}]}`}>

template literals in jsx

2 Answers2

Linked