In my current project, I am attempting to modify the className of selected items within a mapped array using another array (this.props.notPressAble). The reason for this is because I want certain objects in the array to have a different CSS style.
handleOptions = () =>{
let array = this.props.options.map((option, i) =>
<a
key={i}
className={classes.dropdownoptions}>
{option}</a>)
for(let x = 0; x < this.props.options.length; x++)
{
if(this.props.notPressAble !== undefined)
{
for(let y = 0; y < this.props.notPressAble.length; y++)
{
if(x == this.props.notPressAble[y])
{
array[x].props.className = classes.dropdownoptionsnotpressable
}
}
}
}
return array
}
Below is where I apply the class to help readers better understand my issue:
<SideBarContainers name="Planning" notPressAble={[0, 6, 11]}
options={[
"Activities:",
"+ New Activity",
"Show All Open",
"Show Delayed",
"Show All Closed",
"Show Categorized All",
"To do:",
"+ New To Do",
"Show All Open",
"Show All Closed",
"Show Categorized All",
"Personal planning:",
"+ New Post",
"Show Simple All"
]} />
The issue I'm facing is that array[x].props.className is a readOnly value and cannot be altered. Is there an alternative method to achieve this?