Styling different values of an array in React.js

Question

I have an array that is getting data from an API, but I want to style each button differently so that the background colours differ. I am also using Material UI... Here is my code -

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

Please tell me how to style them

Answer 1

There are several ways in which you can assign different styles to different buttons. It can be done majorly using string literals.

Few examples,

1. If you are using bootstrap/tailwind and your styling will majorly consist of that, then you can something like

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

Notice p-${id} would get modified for each particular element in the array

2. Even if bootstrap isn't being used, you can use the above method, create custom classNames to assign styles to each button separately.
3. If you need to specifically assign a style to the first/last element, you can use first child selector (or) last child selector .