How can you modify the color of a card in React by mapping through an array and evaluating its value?

I'm attempting to modify the color of a card depending on the current slot value, which is an object in an array. While I am iterating through each card, I want to adjust the background color of the card based on this value. However, my current method does not appear to be working as expected. Any suggestions on how I can achieve this?

slots.map(slot => 
          <Card key ={slot._id} style={{backgroundColor:slot.OccupiedStatus?'black':'teal'}}>
            
            <Typography>{slot.category}</Typography>
          </Card>
javascriptcssreactjsmeteormaterial-ui

Answer №1

Given that The Card functions as a React Component, the style in this scenario is not treated as an attribute but rather as a prop that will be forwarded to the Card component.

You can access the style prop within your Card Component and utilize it accordingly.

const Card = (style, ...otherProps) => {
    return <div style={style} >hello</div>
}

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

When implementing a v-for loop in Vue.js with Vuetify and using v-dialog components, the click event may be overwritten for all v-dialogs except

My app features the utilization of a Vuetify v-dialog within a v-for loop. However, I am encountering an issue where clicking on any chip within the loop triggers the click event for the last v-chip, instead of the specific one being clicked. It appears t ...

javascriptvue.jsvuetify.js

spark of unique substance

Having trouble with cycle2 as all images are briefly displayed when the page loads. I tried the recommended solution http://jquery.malsup.com/cycle/faq.html but it didn't stop the flashing, indicating a different issue: The suggested fix for Cycle is ...

javascriptjqueryhtmlcssjquery-cycle2

The Vue production build displays a blank page despite all assets being successfully loaded

After running npm run build, I noticed that my vue production build was displaying a blank page with the styled background color from my CSS applied. Looking at the page source, I saw that the JS code was loading correctly but the content inside my app d ...

javascriptvue.js

What is the most effective method for seamlessly transitioning between Material UI's accordion and tabs to enhance responsiveness?

Is it possible to dynamically switch between accordion and tabs based on screen width using the Material UI React implementation (MUI)? The documentation doesn't address this scenario, but I believe it is a common requirement. Currently, I am success ...

reactjstabsmaterial-uiaccordion

Tips for changing the state of a toggle button with JavaScript

I need help creating a toggle button. To see the code I'm working on, click here. In my JavaScript code, I am reading the value of a 'checkbox'. If the value is true, I add another div with a close button. When the close button is clicked, ...

javascripthtmljquerycss

How to customize the appearance of an element within a shadow DOM

I am currently implementing a custom CSS style over an application without the ability to modify its code. Initially, the DOM structure looked like this: <div class="foo"> <div class="bar"></div> </div> and I ...

cssshadow-dom

Error encountered while trying to import Material-UI's IconButton: TypeError

Recently, I delved into exploring Material-UI but encountered a major obstacle. I successfully integrated a Drawer in my application, but upon attempting to add an IconButton, I faced an issue that remains unresolved. Oddly enough, my previously function ...

reactjstypeerrormaterial-ui

The Google analytics script encountered issues loading on a page, resulting in a 500 error code

Encountering a persistent issue where the Google Analytics script fails to load with a 500 error code on the website, but interestingly works fine when opened in a new tab. After testing on MacOS BigSur using Chrome, Firefox, and Safari in both normal and ...

reactjsgoogle-analyticsnext.jsgoogle-tag-managergoogle-analytics-4

Troubleshooting the hoist-non-react-statics problem during the rollup.js compilation process

Encountering difficulties while attempting to construct my storybook using rollup.js. Within my react components, I am utilizing @mui/material, and the installation page suggests installing two additional packages called @emotion/react and @emotion/styled. ...

reactjsmaterial-uistorybookrolluprollupjs

The reliability of next router events can sometimes be called into question as they do not always function consistently

I've been working on creating a loading screen for my Next.js project. The issue I'm facing is that sometimes the loading message stays on the screen and doesn't go away even after the page has loaded. I suspect this may be due to the state ...

javascriptreactjsnext.jsjsxbootstrap-5

Is there a way to make a React Component to update and navigate to a specific position using react-sound

Currently, I am in the process of constructing an audio player utilizing react-sound. One feature I aim to incorporate is the ability to return to a specific position within the audio track. At the moment, this is my approach: goToVeryCustomPosition() { ...

javascriptreactjsaudioreact-nativecomponents

Storing the model on the server with the help of Backbone and NodeJS

As a beginner in Backbone and AJAX, as well as being new to Node.js which my server is built on, I am working on saving a model using the Save method in Backbone for a webchat project for university. Right now, my goal is to send the username and password ...

javascriptajaxnode.jsbackbone.js

Troubleshooting: TailwindCSS issues in Next.js 13 (with app directory)

I have recently updated to the latest version of tailwindcss. However, when I execute the command "npm run dev", tailwind only affects the fonts and nothing else. My current tailwind.config.js setup: /** @type {import('tailwindcss').Config} */ ...

reactjsnext.jstailwind-csspackage.jsonapp-folder

Struggling to map JSON data (received from WCFRest) onto an HTML table

After creating a WCFRestful service that populates data in JSON format as shown below: {"GetEmployeesJSONResult":"[{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"I ...

javascriptjqueryhtmlknockout.jswcf-rest

Modify the background color of checkboxes without including any text labels

I am looking to customize my checkbox. The common method I usually see for customization is as follows: input[type=checkbox] { display: none; } .my_label { display: inline-block; cursor: pointer; font-size: 13px; margin-right: 15px; ...

javascriptjqueryhtmlcsscheckbox

Tips for implementing a minimum character length feature in React Material-UI's Autocomplete feature

I am looking to add a 'minimum character length' feature to the autocomplete component in react material-ui. The code snippet below demonstrates what I have so far. constructor(props) { super(props); this.state = { // toggle for ma ...

javascriptreactjsautocompletecomponentsmaterial-ui

Register/Login with a popup window React and Spring framework

We are in the process of implementing registration and login functionality using a popup window on React. While the layout seems to be complete, we are facing a challenge regarding how to connect authentication with the popup window. Despite searching th ...

reactjsspring-mvcspring-securitypopuppopupwindow

Are you struggling with perplexing TypeScript error messages caused by a hyphen in the package name?

After creating a JavaScript/TypeScript library, my goal is for it to function as: A global variable when called from either JavaScript or TypeScript Accessible via RequireJS when called from either JavaScript or TypeScript Complete unit test coverage Th ...

javascripttypescriptnpmumd

Switch the array's value if the key is a match?

I'm currently facing an issue where my code does not push the object when the key matches. How can I update the value of the key instead when there is a match? this.state.data.concat(items).filter(function (a) { return !this[a.key] && (th ...

javascriptreactjs

Accepting PHP multidimensional array through ajax

My PHP code includes a script to open a database, fetch data, and encode it into JSON format. include_once($preUrl . "openDatabase.php"); $sql = 'SELECT * FROM dish'; $query = mysqli_query($con,$sql); $nRows = mysqli_num_rows($query); if($nRow ...

javascriptphphtmlajaxhtml-framework-7