Change to a different button based on a condition in ReactJS

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?

Answer №1

To convert the true value to a string type, simply enclose it in quotes. Give this a shot:

<button className={`actionBoxButtonGrey ${moveChecker().includes('DiceMove') ? "actionBoxButton" : ''}`}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop images from appearing transparent when placed inside a transparent div

My issue is clearly visible in this image: The div element is transparent and affecting the images inside it. Below is my HTML code: <div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;"> <div class="cnvptr"> ...

"Encountered an error while trying to access properties that

Struggling to create a practice menu with the functionality of making elements appear and disappear on click? If you are encountering issues with a class named "option" not working as expected, you are not alone. Clicking on nested objects like images or i ...

Using React - send props directly to targeted child components

The Layout component code snippet is displayed below: import React, { useRef, useEffect, useState } from "react" import Navbar from "./Navbar" import "../styles/mains.scss" const Layout = ({ children }) ...

What is the most effective method for creating posts, pages, and their corresponding URLs using Next.js and MongoDB

Here's a glimpse of my MongoDB data: { "_id": { "$oid": "630f3c32c1a580642a9ff4a0" }, "title": "this is a title", "paragraph": "this is a paragraph" } Now, let's t ...

React Context failing to update when clicking on modal opening button

Currently, I am facing an issue where I am attempting to trigger a modal by updating the state of the component within a Context Provider. Despite the button registering a click successfully, the Modal fails to open. Below is the code snippet containing ...

Utilizing vue-router to create two separate navigation bars where only one link is highlighted as active

In my setup, I have implemented two sections with navigation structured as follows: <ul class="navigation-list"> <li v-for="(route, index) in navRoutes"> <router-link :to="route.path"> <span>{{ route.name }}</span> ...

Is there a preferred method for looping through a NodeList and transferring its elements without the need to convert them into an Array?

Take a look at this jsFiddle that showcases the issue. It seems that while iterating over and making changes to the NodeList directly, the counter variable i skips every other node. In the provided fiddle example, there are two lists, #one and #two, and t ...

JS: Discovering an element's screen position consistently across various computers

I am currently working with a matrix of size 13 x 20, where each cell contains a number ranging from 0 to 300, representing different tiles to build a map. In addition, there is a "hero" character - a movable image. Pressing an arrow key will move the her ...

The Material Ui Datepicker is throwing an error, indicating that it requires a string input

I have been attempting to integrate a Datepicker into my React Project using the Material UI's DatePicker. Initially, I followed the instructions on this website. However, it did not work as expected. Therefore, I decided to try a different approach b ...

Problem with the content-editable attribute

My goal is to make each div with the class .edit editable by adding the contenteditable property: $(document).ready(function() { $(".edit").attr("contenteditable", "true"); }); However, after applying this, I found that clicking on a div with content ...

Don't pay attention to CSS that is outside of the div

Currently, I am attempting to populate a div with templates in order to preview them. These templates are sourced from a database and configured using php. My issue lies in the fact that certain entries consist of entire websites (complete with a head and ...

How to fix the issue of a static background image in Bootstrap that does not

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Bootstrap--& ...

Positioning elements precisely on a webpage through absolute positioning and floating them

This seems to present a conflicting situation. Ideally, I am looking to position two child elements on the left and right edges of the parent element, vertically centered, and overlaying all other sibling elements. ...

What are some ways to obscure the stored password in a database with characters like asterisks or other symbols

Currently, I am working on developing the admin features for my website and have been using this resource to assist with adding users: One issue that I have encountered is that when I added a password field, it appears in its stored form which is not idea ...

Send all state values to the child component

I have an old application that sends a JSON to generate a multi-page form. I'm working on creating a universal multi-page form component where we can simply input a JSON to produce a form. The app utilizes a function called buildFormState which initi ...

Encountering an error while attempting to load the jQuery script: TypeError - $.fn.appear.run is not a

I have included an animation script for CSS in my markup, but I am encountering the following error: TypeError: $.fn.appear.run is not a function Does anyone know why this is happening and how I can resolve it? /* * CSS3 Animate it * Copyright (c) 2 ...

Node.js and react-create-app are not compatible with each other

I am currently using node.js version 14.6.0 and node-v version 7.20.0 To replicate the issue, follow these steps: npx create-react-app my-app2 Once everything is installed, run npm i After completing the above steps, you may encounter the following warn ...

Using an HTML form to send a PDF file through Nodemailer

A form with an upload file input needs to allow users to upload their file and send it through the form. Currently, the attached PDF file in the email doesn't contain any data and won't open properly. The nodemailer options are set up as follows ...

AngularJS button click not redirecting properly with $location.path

When I click a button in my HTML file named `my.html`, I want to redirect the user to `about.html`. However, when I try using `$location.path("\about")` inside the controller, nothing happens and only my current page is displayed without loading `abou ...

HTML tends to disregard the dimensions specified in the JavaScript file

I'm currently working on replicating an Etch-a-Sketch style drawing board where hovering over a single pixel with the mouse changes its color. However, I've hit a roadblock when it comes to drawing the board. The flexbox container doesn't se ...