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

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;
}
}
i want add inline style
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 + ')'

Answer 3

1.Inline styles can be added to a component in ReactJS as shown below:
render() {
return (
<div style={{ color: 'white', backgroundColor: 'red' }}>
Div to be styled
</div>
)
}
Or by passing a style object to the component:
render() {
const divStyle = {
color: 'white',
backgroundColor: 'red'
};
return (
<div style={divStyle}>
Div to be styled
</div>
)
}
In order to set a dynamic width based on the number of child elements as you have described, I would recommend using CSS. Use display: flex on the wrapping element and flex-grow: 1 on the inner element.
Example: https://jsfiddle.net/edyjt34r/

Answer 4

Without using Calc function you can this desired result
<div style = width: `${100 / ${yourVariable}}%`></div>

Answer 5

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);
let width = 100 / radio.length;
element.style.width=width + "%";
}
}