Not apply dynamic class in react js rendering - reactjs

Question

I am applying class on condition based but it is not apply. But when I apply class name static then it is applied successfully.
const styles = theme => ({
labelsuccess: {
"background-color": "#5cb85c"
},
labelprogress: {
"background-color": "#f0ad4e"
}
});
let labelcolor = [
{
status: "In Progress",
class: "classes.labelprogress"
},
{
status: "Completed",
class: "classes.labelsuccess"
}
];
{Developertasklist.map((task, index) => (
<ListItem key={index} divider="true">
<div className={classes.taskwidth}>
<span className={classes.hideelement}>
{
(foundValue = labelcolor.filter(
obj => obj.status === task.status
)[0].class)
}
</span>
<ListItemText
primary={
<React.Fragment>
{task.name} - {task.due_date}
</React.Fragment>
}
secondary={
<React.Fragment>
<Typography
component="span"
className={foundValue}
color="textPrimary"
>
{task.status}
</Typography>
</React.Fragment>
}
/>
</div>
</ListItem>
))}
Why dynamic class does not apply?

Answer 1

set your variable before the return. Not inside.
with arrow functions, you doesn't need use return if you use brackets like this () => ( ... ), but if you want to set variable or calculating, use with curly brackets and return statement. like this;
() => {
const a = 'variable';
return ( <div class={a}>... );
}
try this one.
{Developertasklist.map((task, index) => {
const foundValue = labelcolor.filter(
obj => obj.status === task.status
)[0].class;
return (
<ListItem key={index} divider="true">
<div className={classes.taskwidth}>
<ListItemText
primary={
<React.Fragment>
{task.name} - {task.due_date}
</React.Fragment>
}
secondary={
<React.Fragment>
<Typography
component="span"
className={foundValue}
color="textPrimary"
>
{task.status}
</Typography>
</React.Fragment>
}
/>
</div>
</ListItem>
)}
)}