Uso Ant Design y datos que provienen de API. Supongo que los datos son así.
data = [ { name: "John", job: "Freelancer", }, { name: 'Bob', job: 'UI Designer' }, { name: 'Sam', job: 'CEO' }, { name: 'Alex', job: 'Mobile Dev' }, { name: 'Jess', job: 'Web Dev' }, ];Quiero devolver el trabajo con la etiqueta de Ant Design cuya etiqueta tiene un color diferente
<Tag color="green">green</Tag> <Tag color="cyan">cyan</Tag>He enlazado los datos. pero no sé cómo hacer que los datos tengan una etiqueta de color diferente
data.map((el) => { //This example doesn't have color return <Tag>{el.job}</Tag> })¿Cómo lograr eso? Y lo siento, no soy lo suficientemente bueno en inglés. Espero que entiendas lo que quiero decir O puedes visitar el código sandbox aquí
En sus datos, agregue una propiedad como tagColor para cada objeto.
data = [ { name: "John", job: "Freelancer", tagColor: "red" }, { name: 'Bob', job: 'UI Designer' tagColor: "green" }, { name: 'Sam', job: 'CEO' tagColor: "blue" }, ];Luego, en el ciclo, use esa propiedad para agregar colores dinámicamente. Me gusta,
data.map((el) => { return <Tag color={el.tagColor}>{el.job}</Tag> });Actualizado
Si los colores pueden ser aleatorios, puede colocar todos sus colores en una matriz. Y puede elegir los colores uno por uno usando el índice o incluso un aleatorizador. Algo como,
const colors = ["red", "blue", "green"]; data.map((el, i) => { return <Tag color={colors[(i%colors.length)]}>{el.job}</Tag> });Seleccionará los colores en la matriz uno por uno según el índice.