How to Change the Appearance of Elements in an Array Using React.js

Question

How to Change the Appearance of Elements in an Array Using React.js

My situation involves an array receiving data from an API, and I'm looking to customize each button's appearance by giving them different background colors. In addition, my project includes Material UI... Below is the snippet of code I have -

{options.map((data, id) => (
 <Button className='p-3 md:w-[25wh] md:h-[25vh]' onClick={handleClickAnswer} fullWidth variant="contained">{decode(data)}</Button>
))}

I need guidance on how to style these buttons uniquely

css reactjs api material-ui tailwind-css

Answer 1

Answer №1

There are various methods to apply distinct styles to different buttons. One common approach is utilizing string literals.

For instance,

If your project utilizes bootstrap or tailwind for styling, you can do something like this:

{options.map((data, id) => (
     <Button 
       className=`p-${id} md:w-[25wh] md:h-[25vh]` 
       onClick={handleClickAnswer} 
       fullWidth 
       variant="contained">
        {decode(data)}
     </Button>
    ))}

Note that p-${id} will be adjusted for each item in the array

Even without using bootstrap, you can adopt the same technique by defining custom classNames for individual button styles.
If you want to apply a specific style to the first/last element, you can utilize the first child selector or last child selector.

Answer 2

There are various methods to apply distinct styles to different buttons. One common approach is utilizing string literals.

For instance,

If your project utilizes bootstrap or tailwind for styling, you can do something like this:

{options.map((data, id) => (
     <Button 
       className=`p-${id} md:w-[25wh] md:h-[25vh]` 
       onClick={handleClickAnswer} 
       fullWidth 
       variant="contained">
        {decode(data)}
     </Button>
    ))}

Note that p-${id} will be adjusted for each item in the array

Even without using bootstrap, you can adopt the same technique by defining custom classNames for individual button styles.
If you want to apply a specific style to the first/last element, you can utilize the first child selector or last child selector.

How to Change the Appearance of Elements in an Array Using React.js

Answer №1

Similar questions

Tips for effectively transferring data from useSelector to useState to avoid unnecessary re-renders

Issue: Multiple requests being sent to the server using the axios.put method resulting in a Network Error. However, error is caught after

Deactivate participant's mic using AWS Chime SDK for JavaScript

Using the useState hook to manage an array of boolean values in a React

NodeJS rendering method for HTML pages

How to obtain the height of the parent screen using an iframe

Ensure that the text box inside the div adjusts its size in accordance with the dimensions of the window, as the div is already designed

Issue with React when attempting to add a secondary class to Toggle component

Tips for positioning elements in the center and preventing them from getting cut off the edge of the screen using a horizontal scrollable div and the `justifyContent: "center"` property

What is the best method to determine offsetTop in relation to the parent element instead of the top of

Issue with aligning items vertically using CSS and Javascript

Preventing a sprite from going beyond the boundaries of a canvas with pure JavaScript - here's how!

How can I ensure the button remains disabled until all inputs are completed in Redux form?

Different requirements for the same peerDependency across various versions needed

Overlapping input elements occur when Twitter bootstrap prepended input elements are positioned side by side

Is there a way to achieve this design using bootstrap?

Locate specific text within the content and apply an underline to it

When you click on the collapsible header background, the content collapses, but the main icon does not update

When the div is clicked, it changes color and then reverts back to its original color when another

Tips for highlighting a Material UI Button when pressing the Enter key