样式材料 ui 表格单元格根据它们的值

Question

I have a material ui table and I would like to colour the different cells according to what value is displayed in them. The cells are populated with json data using map. For example if a cell has the value 1, I would like the colour to be yellow.

    {
      Name: "A Person",
      Attendence: [
        {
          date: "2019/12/01",
          attendence: 1
        },
        {
          date: "2019/12/02",
          attendence: 1
        },
        {
          date: "2019/12/03",
          attendence: 0
        }
      ]
    }
  ];

  return (
    <Fragment>
      {attendence.map(person => {
        return (
          <Table>
            <thead>
              <tr>
                <th>Name</th>
                {person.Attendence.map(personAttendendance => {
                  return <th>{personAttendendance.date}</th>;
                })}
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{person.Name}</td>
                {person.Attendence.map(personAttendendance => {
                  return <td>{personAttendendance.attendence}</td>;
                })}
              </tr>
            </tbody>
          </Table>
        );
      })}
    </Fragment>
  );
}

export default Test;

That is what the table looks like. I tried

    if(value === 1){
      return(
        <TableCell style={{ background: "red" }}>{value}</TableCell>
      )

    } else {
      return(
        <TableCell style={{ background: "red" }}>{value}</TableCell>
      )
    }

  }

But that did not work . It just read the else and made everything red.

Answer 1

Change your tbody in test.js to:

<tbody>
   <tr>
      <td>{person.Name}</td>
      {person.Attendence.map(personAttendendance => {
          if(personAttendendance.attendence === 1){
             return <td style={{background: "red" }}>{personAttendendance.attendence}</td>;
          } else {
             return <td style={{background: "blue" }}>{personAttendendance.attendence}</td>;
          }                  
      })}
   </tr>
</tbody>

or

<tbody>
   <tr>
      <td>{person.Name}</td>
      {person.Attendence.map(personAttendendance => {
          return <td style={{background: personAttendendance.attendence === 1 ? "red" : "blue"}}>{personAttendendance.attendence}</td>;                
      })}
   </tr>
</tbody>

Which ever suits you best.

Link to fork here . (using the second example)