Question

-3

template literals in jsx

rated 0 times [ 1] [ 4] / answers: 1 / hits: 39592 / 6 Years ago, mon, april 9, 2018, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryanulyssesb

Add To Favorites

Follow

Total Points: 91

Total Questions: 105

Total Answers: 102

Location: England

Member since Tue, Sep 8, 2020

4 Years ago

ryanulyssesb questions

1 Vue 3: `defineProps` are referencing locally declared variables

Sat, Nov 13, 21, 00:00, 3 Years ago

1 How to put file path in package.json file

Sat, Mar 20, 21, 00:00, 3 Years ago

1 How to test dynamic imports (then and catch) with Jest

Mon, Sep 14, 20, 00:00, 4 Years ago

1 Sending data from Python to Javascript using EEL

Mon, Mar 9, 20, 00:00, 4 Years ago

1 SyntaxError: Unexpected token / in JSON at position 132

Sun, Jul 7, 19, 00:00, 5 Years ago

View All

answered 6 Years ago cruz · Accepted Answer

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

>