Adding an object conditionally inside an array-CodePudding

I want to add a conditional object inside an array of objects. If the condition is not met, I want it as if that object is not there AT ALL, while keeping the other objects as they are. Consider the following:

const CardBuildingBlock: FC = () => {
    const type = 'typeA';

    const typesOfCards = [
      {name: 'Card A'
      size: 'Medium'
      action: 'make'},

      {name: 'Card B'
      size: 'Small'
      action: 'break'},

      {name: 'Card C'
      size: 'Large'
      action: 'build'},

//I tried doing the following but it doesn't work

      type == 'typeA' ? null : {
      name: 'Card A'
      size: 'Medium'
      action: 'make'},
    ];


    return(
      typeOfCards.map(({name, size, action}) => (
        <BuildCard 
          name = {name}
          size = {size}
          action = {action}
        />
    )
)};

Please Help.!!!

Thanks for the help.

CodePudding user response：

From what I understood, you want to filter away all the elements of the array given a condition. What I would do is adding a new key to the object specifying if it should be displayed, and then filter & map.

const typesOfCards = [
  { name: "Card A", size: "Medium", action: "make", type: "typeA" },
  ...
];

return typesOfCards.filter(card => card.type === "typeA").map(({ name, size, action }) => (
    <BuildCard name={name} size={size} action={action} />
  ));

CodePudding user response：

Maybe a push would be useful in that case:

type === 'typeA' && typesOfCards.push({
      name: 'Card A'
      size: 'Medium'
      action: 'make'}
)

maybe you might want to include that within a function and it should return the typesOfCards array

CodePudding user response：

Easiest way here would be to concat new element to an array. In case condition is true, you will concat new element. Consider this examples:

// using if statement
const type = "typeA";

let additionalCardOfTypeA = {
  name: "Card A",
  size: "Medium",
  action: "make",
};

let typesOfCards = [
  { name: "Card A", size: "Medium", action: "make" },
  { name: "Card B", size: "Small", action: "break" },
  { name: "Card C", size: "Large", action: "build" },
];

if (type === "typeA") {
  typesOfCards = typesOfCards.concat(additionalCardOfTypeA);
}

// using ternary operator
const type = "typeA";

let additionalCardOfTypeA = {
  name: "Card A",
  size: "Medium",
  action: "make",
};

let typesOfCards = [
  { name: "Card A", size: "Medium", action: "make" },
  { name: "Card B", size: "Small", action: "break" },
  { name: "Card C", size: "Large", action: "build" },
].concat(
  type === "typeA"
    ? additionalCardOfTypeA 
    : []
);

Edit

To insert new element in particular place you will have to create additional arrays. First, find a place for your element. Then, create an array that have everything before said index in original, and array that have everything from index to an end. Then concatenate start, new element and end into final array.

const type = "typeA";

let additionalCardOfTypeA = {
  name: "Card A",
  size: "Medium",
  action: "make",
};

let typesOfCards = [
  { name: "Card A", size: "Medium", action: "make" },
  { name: "Card B", size: "Small", action: "break" },

  { name: "Card C", size: "Large", action: "build" },
];

if (type === "typeA") {
  let indexForNewElement = getSomehowIndex();
  // Getting everything before index
  let head = typesOfCards.slice(0, indexForNewElement);
  // Getting everything after index
  let tail = typesOfCards.slice(indexForNewElement);
  typesOfCards = head.concat(additionalCardOfTypeA).concat(tail);
}