JSX template literals for an inline style

Solution 1:

style={{strokeDasharray: `${percent},${100 - percent}`}}

Solution 2:

The key thing here is that the code within the outer {} is pure JavaScript code (specifically, an expression [not a statement]). With the style property, you specify an object:

<circle style={yourObjectHere} />

In your case, you're specifying an object literal, just like any other object literal in JavaScript. So you have the property name, a colon, and the property value. Since part of the value is from a variable, you use the usual ways of creating a concatenated string:

<circle style={{strokeDasharray: percent + ", 25"}} />

or

<circle style={{strokeDasharray: `${percent}, 25`}} />

etc.

(If you're wondering why I used /> instead of ></circle>, it's because even non-void elements are typically self-closed in JSX. JSX isn't quite SVG or HTML or even XHTML, it's its own beast.)

You probably want to calculate the second number as well, as Михаил Мишин shows, so with the above that's:

<circle style={{strokeDasharray: percent + ", " + (100 - percent)}} />

or

<circle style={{strokeDasharray: `${percent}, ${100 - percent}`}} />