Q:

Adding variable to JSX string

I'm returning the following HTML in React.
<div 
    className={ props.className } 
    data-slide='{"arrows": true, "slidesToShow": 3, "slidesToScroll": 1}'>
</div>

It returns the following which is ok
<div class="some-class" data-slide="{"arrows": true, "slidesToShow": 3, "slidesToScroll": 1}"></div>

However, I want the value for arrows to be a variable named arrowsVal which I'm setting in my React component. 
I tried:
<div 
    className={ props.className } 
    data-slide='{"arrows":' + arrowsVal + ', "slidesToShow": 3, "slidesToScroll": 1}'>
</div>

and
<div 
  className={ props.className } 
  data-slide='{"arrows": `${arrowsVal}`, "slidesToShow": 3, "slidesToScroll": 1}'>
</div>

but it does not work. 

A:

This should work i think

<div 
  className={ props.className } 
  data-slide={`{"arrows": ${arrowsVal}, "slidesToShow": 3, "slidesToScroll": 1}`}>
</div>

However the approach that i would recommend is to define a const before return statement of Render method defined as:

const dataSlide = `{"arrows": ${arrowsVal}, "slidesToShow": 3, "slidesToScroll": 1}`

and render it as:

<div 
  className={ props.className } 
  data-slide={dataSlide}>
</div>

I hope this will help :)

