Adding variable to JSX string

Question

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.

You'll probably get a few different answers to this, but in general, when I need to perform logic/processing within JSX, I try to do it in a separate function that I call within the brackets. so, data-slide={createDataSlideString()}, and then before your render's return(), function createDataSlideString(){...code that creates your string}. This makes it easier to avoid JSX character-escape issues in your expressions. — Andy Taton
– Andy Taton, Commented Sep 19, 2018 at 14:08

Mohamed Sadat · Accepted Answer · 2018-09-19 14:09:58Z

2

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 :)

answered Sep 19, 2018 at 14:09

Mohamed Sadat

2551 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CyberJ Over a year ago

Thanks! Is there any particular reason for defining a const first? Rather than just adding it to return.

Mohamed Sadat Over a year ago

It's juste more helpful for readability because it offers less code in your return statement.

Allen Wong · Accepted Answer · 2018-09-19 14:13:18Z

0

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

if you need data-slide to be a string anyway

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

answered Sep 19, 2018 at 14:13

Allen Wong

1,4831 gold badge13 silver badges16 bronze badges

Comments

Dawid Karabin · Accepted Answer · 2018-09-19 14:35:22Z

0

Try something like:

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

edited Sep 19, 2018 at 14:35

Dawid Karabin

5,3031 gold badge26 silver badges33 bronze badges

answered Sep 19, 2018 at 14:12

Rahul kumar

441 silver badge9 bronze badges

Collectives™ on Stack Overflow

Adding variable to JSX string

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related