how to add inline style width:calc(100% / var) in reactjs?

Question

 for (let i = 0; i < divCount.length; i++) {
        var radio = divCount[i].getElementsByClassName("radio_count");
        for (var index = 0; index < radio.length; index++) {
            var element: any = radio[index];
            console.log(element);
             var style ="width:calc(100% / " + element + ")";
            element.style = style;
        }

    }

1. i want add inline style
2. set dynamic value in 100% divided ex. width:clac(100% / var); how can i do this ?

Answer 1

Template literals should help.

<div style={{width: `calc(100% / ${yourVariable})`}}></div>

Example https://jsfiddle.net/69z2wepo/81579/

Answer 2

What @Andrew wrote is correct, however here's a non ES2015/ES6 version (the question did not specify):

In the react component render, you can use the following JSX:

render: function() {
    var dynamicWidth = 'calc(100% / ' + value + ')';
    return (
      <div>
        <div style={{width: dynamicWidth}}></div>
      </div>
    );

Basically how this works is on each render that string gets interpolated. What @Andrew has shown you is just a better syntax available to do the same thing in ES6

calc(100% / ${value}) is conceptually equivalent to 'calc(100% / ' + value + ')'