I have a list of cards and I want to assign a unique color to each card in the list. I attempted to do this on my own, but it ended up being more complex than I anticipated.
Here is the list of cards:
return (
<Container>
<Row className="row gy-4 mt-4">
{profsData && profsData.data.map((item) => (
<Col key={item.id} className='col-3'>
<Card className='h-100 w-100 py-5'>
<Card.Body>
<Card.Title>{item.username}</Card.Title>
<Card.Text>
{item.bio}
</Card.Text>
{item.college && (<h6 className='fw-bold mt-5'>Collège</h6>)}
{item.lycee && (<h6 className='fw-bold mb-5'>Lycée</h6>)}
<Button variant="primary" onClick={() => handleShow(item.id)}>Rendez-Vous</Button>
</Card.Body>
</Card>
</Col>
))}
</Row>
</Container>
)
Additionally, here is an array of colors with a random selection function:
const variant = [
'Primary',
'Secondary',
'Success',
'Danger',
'Warning',
'Info',
'Light',
'Dark',
]
const index = Math.floor(Math.random() * variant.length)
const colorPicked = variant[index]
The challenge arises because I am utilizing a map() function to display data from the profsData array and incorporating another map() for the color variant array within the initial function isn't feasible.