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