Currently, I am tackling a ReactJS project that involves the utilization of the following function:
function checkMoves() {
let index = 0;
let moveList = [];
while (index < props.moves.length) {
if (!moveList.includes(props.moves[index].moveName))
moveList.push(props.moves[index].moveName);
index++;
return moveList;
}
}
This function examines an object containing moves and extracts all unique move names. Additionally, I have included an HTML button in my code:
<button className={`actionBoxButtonGrey ${checkMoves().includes('DiceMove') ? "actionBoxButton" : ''}`}
Despite my efforts, the above code snippet is not functioning as intended. Essentially, I am attempting to switch the design of the button to actionBoxButton, which is defined in my CSS file, when the condition `checkMoves().includes('DiceMove')` holds true.
Do you happen to know of any workarounds or alternative approaches for implementing conditional styles on buttons?