Changing table row colour based on values from map function ( React Js)

Question

i am trying to figure out a way to change the table row colour based on the certain values inside the map function. I have been trying different solutions like UseRef hook, other stack overflow solutions etc, but was not successful.

         {data.map((item, i) => (
                
                    <Tablerows key={i} >
                    <Tabledata>{item.name}</Tabledata>
                    <Tabledata>{item.place}</Tabledata>               
                    <Tabledata>{dateconvert(item.LOGTIME)}</Tabledata>
                    </Tablerows>
                ))}

Now i call a dateconvert function in the third column to convert to unix time to normal time

function dateconvert(time_1){
  var date1      = new Date(time_1*1000);
  var convert_1  =('0' + date1.getDate()).slice(-2)      + '/'
           + ('0' + (date1.getMonth()+1)).slice(-2) + '/'
           + date1.getFullYear()                    + ' \xa0\xa0\ '
           + ('0' + date1.getHours()).slice(-2)     + ':'
           + ('0' + date1.getMinutes()).slice(-2)   + ':' 
           + ('0' + date1.getSeconds()).slice(-2);

  return convert_1
  }

Everything works fine until now !!. And i have the desired output.

Question :

i want the table row to have a red colour under the following condition. (here "date" represents my item.LOGTIME)

  if((Date.now() - date) /(60 * 1000) >11){ 
     
//change colour of the row to red
    }

Answer 1

I think this is how you can get this working.

const data = [
{ name: "brij1", place: "place1", LogTime: "I ignored this for now" },
{ name: "brij2", place: "place2", LogTime: "I ignored this for now" },
];

const DecoratedContainerData = ({ children }) => {
  const styleProps = {
    style: {
      color: "red",
    },
    // any other props here...
  };
  return children(styleProps);
};

const conditionallyDecorateContainerData = (inputDate) => {
  const convertedDate = dateconvert(inputDate);
  const calculatenumber = 11
    //(Date.now() - Date.parse(convertedDate)) / (60 * 1000);
    // Replace 11 with your formula (I have hardcoded this just to check the color style is working. you can also try by replacing 11 with lower or higher number)

  console.log(calculatenumber);
  if (calculatenumber > 11) {
    return (
      <DecoratedContainerData>
        {(props) => <div {...props}>{convertedDate}</div>}
      </DecoratedContainerData>
    );
  }
  return <div>{convertedDate}</div>;
};

{data.map((item, i) => (
  <div key={i}>
    <div>{item.name}</div>
    <div>{item.place}</div>
    {/* One way */}
    <DecoratedContainerData>
      {(props) => <div {...props}>{dateconvert(item.LOGTIME)}</div>}
    </DecoratedContainerData>
    {/* Second Way */}
    {conditionallyDecorateContainerData(item.LOGTIME)}
  </div>
))}