How to define an array with conditional elements in react

Question

I have a arry called a tableFilterFields like this:

 const tableFilterFields = [
    {
      label: "اfrom",
      name: "StartDate",
      type: FilterControls.DatePicker,
      defaultValue: new Date(new Date().setDate(new Date().getDate() - 3100)),
    }
    props.id === undefined
      ? {
          label: "IdentityTitle",
          name: "IdentityTitle",
          type: FilterControls.Input,
        },
        {
          label: "AccountCode",
          name: "AccountCode",
          type: FilterControls.Input,
        },
         {
          label: "InstrumentPersianCode",
          name: "InstrumentPersianCode",
          type: FilterControls.Input,
        },
        {
      label: "TradeSideTitle ",
      name: "TradeSideTitle",
      type: FilterControls.Input,
        }
        
      : 


  {
            label: "InstrumentPersianCode",
            name: "InstrumentPersianCode",
            type: FilterControls.Input,
          },
          {
        label: "TradeSideTitle",
        name: "TradeSideTitle",
        type: FilterControls.Input,
          },
      ];

I want to apply a condition that If prop was not undefined ....How should I do this?

When I apply the condition in this way, I get a syntax error — zahra zamani
– zahra zamani, Commented Jul 6, 2021 at 12:24

zahra zamani · Accepted Answer · 2025-02-02 09:03:04Z

It would be better to do the conditional operation outside the array definition. You can achieve this by conditionally doing push operation

if(props.id === undefined){
  tableFilterFields.push({
          label: "IdentityTitle",
          name: "IdentityTitle",
          type: FilterControls.Input,
        },
        {
          label: "AccountCode",
          name: "AccountCode",
          type: FilterControls.Input,
        },
         {
          label: "InstrumentPersianCode",
          name: "InstrumentPersianCode",
          type: FilterControls.Input,
        },
        {
      label: "TradeSideTitle",
      name: "TradeSideTitle",
      type: FilterControls.Input,
        })
} else {
     tableFilterFileds.push(  {
            label: "InstrumentPersianCode",
            name: "InstrumentPersianCode",
            type: FilterControls.Input,
          },
          {
        label: "TradeSideTitle ",
        name: "TradeSideTitle",
        type: FilterControls.Input,
          })
}

lemon69 · Accepted Answer · 2021-07-06 12:22:30Z

0

import React from "react";

const index = ({ array }) => {
  if (array === undefined) return <>Array not found</>;

  return (
    <div>
      {array.map((x) => (
        <RenderArray key={x.id} {...x} />
      ))}
    </div>
  );
};

export default index;

you can do something like this for condition randering

answered Jul 6, 2021 at 12:22

lemon69

811 silver badge8 bronze badges

Comments

marzelin · Accepted Answer · 2021-07-06 12:23:00Z

0

First insert the common elements, then push the rest conditionally:

const arr = ["common"];
const condition = undefined === void 0;
arr.push.apply(arr, condition ? ["variant1", 2, 3] : ["variant2", 4, 5]);

console.log(arr);

answered Jul 6, 2021 at 12:23

marzelin

11.7k5 gold badges38 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to define an array with conditional elements in react

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related