Change the background color of a div element dynamically

Is there a way to dynamically apply a background color to only the first 5 div blocks in React? Here is my code snippet:

const ImageBlock = ({block}) => {
  const number = 5
  return (
    <React.Fragment>
        {block.map((item, index) => {
          return (
            <div
              key={index}
              style={{
                borderStyle: 'solid',
                borderWidth: '2px',
                backgroundColor: number ? "#000" : null,
              }}
            >
              {item}
            </div>
          );
        })}
    </React.Fragment>
  );
};

Answer №1

To achieve the desired outcome, ensure that the condition is index < number. Replace

backgroundColor: number ? "#000" : null,
with
backgroundColor: index < number ? "#000" : null,
.

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

What is the best way to resize an image for mobile site optimization?

I've been struggling with resizing an image by its width for different mobile devices even after trying to search on Google. Here's what I have attempted: CSS: img.test { width: 100%; height: auto; } HTML: <html> <head> ...

How can I display input only when a checkbox is selected? React with Next.js

I'm trying to figure out how to handle this task, but I'm a bit confused on the approach. I would like to display the promo code field only when the checkbox (I have a promo code) is checked. Additionally, it would be ideal to reveal this field ...

Ensure that both the top row and leftmost column are fixed in a vertical header using JQuery DataTable

Check out the implementation of vertical header flow in Datatables by visiting: https://jsfiddle.net/2unr54zc/ While I have successfully fixed the columns on horizontal scroll, I'm facing difficulty in fixing the first two rows when vertically scroll ...

Struggling with getting the tabbed slider carousel to function properly in Bootstrap 4?

I attempted to incorporate this code snippet: The only modification I made was using these imports: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootst ...

What is the method for defining the href attribute using the parameter passed through ejs?

For my node.js express application, I am utilizing ejs as the view engine. One of the pages in this application is a profile page that displays a user's information. Within this page, there is an anchor tag with the user's email address as the va ...

Why is the toggle list not functioning properly following the JSON data load?

I attempted to create a color system management, but as a beginner, I find it quite challenging! My issue is: When I load my HTML page, everything works fine. However, when I click on the "li" element to load JSON, all my toggle elements stop working!!! ...

What is the use of eRB with various syntax for multiple statements?

I am working with an html.erb file and using link_to to create a hyperlink while the t() function is used for internationalization. However, the code appears quite clunky: <p><%= t('session.new_user') %><%= link_to(t('session ...

Error: The function utils.endOfDay does not exist

I recently started using React and integrated the Material-UI date picker in my project by following the guidelines provided in the documentation. For this implementation, I am utilizing moment.js. Below is the code snippet for the datetimepicker: impor ...

Issue with AngularJS directive: setting ng-readonly variable to true doesn't function as expected

I recently developed a custom directive for input fields. To use it in HTML, you just need to include the following code snippet: <my-input class="input-text" type="number" ng-model="modelVariable" ng-readonly="false" /> With ...

Enhancing Bootstrap Carousel with various effects

My exploration of the web revealed two distinct effects that can be applied to Bootstrap Carousel: Slide and Fade. I'm curious if there are any other unique effects, such as splitting the picture into small 3D boxes that rotate to change the image? ...

Issue with aligning content vertically in a Bootstrap 3 div

My attempt at vertically aligning text within a div using the following code snippet did not yield the desired result (see fiddle): <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> This conte ...

Visual feedback: screen flashes upon clicking to add a class with jQuery

I have successfully added a click event to my pricing tables in order to apply an animation class on mobile devices. However, I am facing an issue where every time I click on a pricing option on my iPhone, the screen flashes before the class is applied. Is ...

Ways to duplicate a letter in HTML?

How can a character be printed repeatedly within a table cell using only HTML or HTML and CSS (excluding HTML5)? *(limiting to only HTML or a combination of HTML and CSS) ** The goal is to print the character "." across the entire length of the cell, wit ...

Showing various SQL data fields within a single HTML column

I am facing a challenge with displaying multiple checkboxes from different columns in a database as a single column on a webpage. Here is the HTML form structure: <div class="form-group"> <label class="col-md-2 control-label">R-1 ...

What exactly happens behind the scenes when utilizing the React hook useEffect()? Is an effect set up with useEffect able to halt the main thread

According to the documentation for the useEffect() hook in React, it states that: "Effects scheduled with useEffect don’t prevent the browser from updating the screen." Insight Unlike componentDidMount or componentDidUpdate, effects set with ...

What is the best way to retain selection while clicking on another item using jQuery?

There is a specific issue I am facing with text selection on the page. When I apply this code snippet, the selected text does not get de-selected even after clicking .container: jQuery('.container').on("mousedown", function(){ jQuery('. ...

Is there a way for me to program the back button to navigate to the previous step?

I am currently developing a quiz application using a JSON file. How can I implement functionality for the back button to return to the previous step or selection made by the user? const navigateBack = () => { let index = 1; axios.get('http ...

Setting up cookies and sessions in an Electron application

Creating a cookie/session in my Electron app has been tricky for me. I attempted to use the default document.cookie method, but unfortunately it did not work. I have looked through the Cookie documentation, but have not been able to find information on ho ...

Using auto margins does not properly align the image in the center of the page

I noticed that in this specific example, the image is not centered properly. Can someone explain why this might be happening? For context, I am using Google Chrome v10 on a Windows 7 machine, not Internet Explorer. <img src="/img/logo.png" style="mar ...

Translate data from two "contact form 7" date fields into JavaScript/jQuery to display the date range between them

NEW UPDATE: I was able to get it working, but the code is a bit messy. If anyone can help me clean it up, I would greatly appreciate it. <div class="column one-fourth" id="date-start">[date* date-start date-format:dd/mm/yy min:today+1days placeholde ...