How to give multiple condition to display the items in the table cell React JS

Viewed 22

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.

0 Answers
Related