Problema: Tengo una matriz de objetos. Cada objeto tiene una clave de nombre. A veces el nombre será el mismo. Cuando el nombre es el mismo, quiero que el color siga siendo el mismo. Cuando el nombre es diferente, me gustaría un color diferente. Me gustaría usar solo 2 colores diferentes que cambien de un lado a otro según los cambios de nombre.
Lo que estaba intentando: hacer que un ID de cliente represente el número 1 o 2. Si es uno, hágalo azul y si es 2, hágalo rojo. Pero no puedo entender cómo iterar correctamente sobre todo.
function buildProjectsGrid(data) { return data.map((obj) => { const { clientId = problem here, Name, Problem, Stage } = obj; const clientClass = `client${clientId}`; return ( <> <div className={`${clientClass} infoTable__text`}>{Name}</div> <div className={`${clientClass} infoTable__text`}>{Problem}</div> <div className={`infoTable__text infoTable__stage ${ Stage === 'Servicing' ? 'infoTable__stage_service' : Stage === 'Request' ? 'infoTable__stage_request' : Stage === 'Invoice' ? 'infoTable__stage_invoice' : Stage === 'Closed' ? 'infoTable__stage_closed' : null }`} style={{ border: 'none' }} > {Stage} </div> </> ); }); }Datos de ejemplo:
[{Name:'Customer 1',Problem:'Issue one',Stage:'Request'},{Name:'Customer 1',Problem:'Issue two',Stage:'Invoice'},{Name:'Customer 2',Problem:'Issue three',Stage:'Servicing'}]En el ejemplo, los dos primeros = azul. Último = rojo. Si continúa con Nombre: 'Cliente 3', debe volver a azul
Así que mantén un registro del nombre y cambia el color cuando cambie el nombre.
function buildProjectsGrid(data) { let lastName = data[0]?.Name; let rowState = false; return data.map((obj) => { if (lastName !== obj.Name) { rowState = !rowState; lastName = obj.Name; } const colorClass = rowState ? 'red' : 'blue'; ...Creo que es más limpio si usa un objeto para mapear las clases que desea agregar
como esto
const classMapping = { Servicing: 'infoTable__stage_service', Request: 'infoTable__stage_request', Invoice: 'infoTable__stage_invoice', Closed: 'infoTable__stage_closed' } const colorClass = ['blue', 'red'] function buildProjectsGrid(data) { let lastName = ''; let lastColor = -1 return data.map((obj) => { const { Name, Problem, Stage } = obj; if(lastName !== Name){ lastName = Name lastColor = (lastColor + 1) % colorClass.length } const clientClass = colorClass[lastColor]; return ( <> <div className={`${clientClass} infoTable__text`}>{Name}</div> <div className={`${clientClass} infoTable__text`}>{Problem}</div> <div className={`infoTable__text infoTable__stage ${classMapping[Stage] || ''}`} style={{ border: 'none' }} > {Stage} </div> </> ); }); }