Hi I am working on a task where I am having a table and I need to render the data in the table using mock value. Based on the Boolean values in the mock I need to show the icon in the first cell of the table and I need to grey-out each cells based on the Boolean. And I need to show the error Icon also in the first cell based on the Boolean. I have achieved spinner and the gray-out option using ternary operation to get Icon I need to use nested ternary or if else. I am struggling to use this nested conditions. I am having two doubts how to use the nested ternary condition and the second question is ternary usage is recommendable(efficient) or I need to use if, else. Any one can guide me how to bring the error Icon based on the Boolean and efficient technique to achieve it. I have added the mock data and code below. Thanks in advance!
Mock Data:
const customerData = {
customerDetails: [{
id:'123',
Desc:'ABC',
isRegular:true,
isCreated:true,
status:{
type:'Regular'
}
CreatedDate:'10-12-2022'
},
{
id:'124',
Desc:'ABC',
isRegular:false,
isCreated:false,
status:{
type:'Rare'
}
CreatedDate:'10-12-2022'
}
]
const generateCells = customData => {
const customers = customerData.find(
status => status.type === customerData.status.type &&customerData.isRegular === true
);
return [
{
key:`${cust.ID}-cell0`
children:
<>
{customers? (
<>
<AlignCmp //Componet designed using flex
align:"center",
fitStart={<Spinner/>}
fill={<Text>{customData.Desc}</Text>}
>
</>
):(
{customData.Desc}
)
}
</>
]}
When isCreated === false and isRegular === false I need to display the Icon. I am struggling to add nested condition in the above genreateCells function.