Change color based on a keys value in each object of array-CodePudding

Problem: I have an array of objects. Each object has a Name key. Sometimes the name will be the same. When the name is the same, I want the color to remain the same. When the name is different, I would like a different color. I would like to just use 2 different colors that switch back and forth based on name changes.

What I was trying: Making a clientId represent the number 1 or 2. If one, make it blue and if 2 make it red. But I cant figure out how to iterate properly over everything.

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>
        </>
      );
    });
  }

Example data:

[{Name:'Customer 1',Problem:'Issue one',Stage:'Request'},{Name:'Customer 1',Problem:'Issue two',Stage:'Invoice'},{Name:'Customer 2',Problem:'Issue three',Stage:'Servicing'}]

In example, first two = blue. Last = red. If it continued with Name:'Customer 3' it needs to go back to blue

CodePudding user response：

So keep track of the of the name and flip the color when the name changes

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';
      ...

CodePudding user response：

I think that it's cleaner if you use an object to map the classes you want to add

like this


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>
        </>
      );
    });
  }