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.
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
}
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>
))}