CSS class dynamicaly added based on JSON value in React - json

Question

I have a JSON value based on percentage. Is there a way add different CSS classes based on it?
E.g. If is 10 to 20% then red. If is 20-30 then orange, till 100%.

Answer 1

Assuming you have a json with an array of item inside, you could do smething like this :
const json = [
{
percent: 10
},
{
percent: 35
},
{
percent: 78
}
];
let myClass = "class1";
const setClass = () => {
json.forEach(item => {
if(item.percent >=10 && item.percent <= 35) myClass = 'class2';
if(item.percent > 35 && item.percent <= 78) myClass = 'class3';
})
}
And then set your class as follow :
<input type="text" value="defaultValue" className={myClass} />

Answer 2

fetchFunction = ()=> {
let jsonValueList=parseInt(jsonData);
this.setState({jsonValue: jsonValueList}); }
_.map(this.state.jsonValue, (item, index) => {
<span key={index} className={ (item <= 100 && item >= 90) ? "colorBlack" : (item < 90 && item >= 80) ? "colorGreen" : "..."}></span>})

Answer 3

Could you maybe provide some more information about the JSON or cases (ranges of percentage) in which you need to apply a class?
I see it like that: you have a few classes that are already defined with various names, and for example you have a JSON array that's mapped in JSX — in each entry of the array you have some percentage value according to which you can apply a class. For example:
const json = {
objects: [
{
id: 1,
label: 'Foo',
percentage: 37,
},
{
id: 2,
label: 'Bar',
percentage: 68
},
{
id: 3,
label: 'Biz',
percentage: 12,
}
]
}
const getClassname = (percentage) => {
if (percentage > 0 && percentage <= 33) {
return 'red'
} else if (percentage > 33 && percentage <= 66) {
return 'yellow'
} else if (percentage > 66 && percentage <= 100) {
return 'green'
}
}
const Component = ({label, percentage}) => {
return (
<div className={getClassname(percentage)}>{label}</div>
)
}
const List = ({list}) => {
return {
list.map(entry => (
<Component
key={entry.id}
label={entry.label}
percentage={entry.percentage}
/>
)
}
}
const App = () => {
return (<List list={json.objects}/>)
}
}