CODEWITHSUNDEEP
arraysreactjstypescriptreact-hooks
Murilo Dagustin
Murilo Dagustin

Reputation: 23

Append a item to an array that is inside a object with useState Hook

I need to append new values to an array that is inside a useState hook, here is the interface and hook:

interface ObjetoAdicionaItem {
    tipo: string;
    nome: string;
    borda: string;
    pratos: number;
    observacao: string;
    quantidade: [{
        pronome: string;
        quantidadeSabor: number;
    }];
}

Here is the hook:

const [arrayItens, setArrayItens] = useState<ObjetoAdicionaItem>();
const [sabores, setSabores] = useState<DadosSabor[]>([]);

The problem is when I try to append new items to the array quantidade;

Sample code:


sabores = [{
    quantidadeSabor: 1,
    pronome: "foo",
    preco: "bar",
    checked: false
  },
  {
    quantidadeSabor: 2
    pronome: "foo2",
    preco: "bar",
    checked: false
  }
]

let nome = sessionStorage.getItem("pronomeAtualSabor") || "";
sabores.map(item => {
  if (item.quantidadeSabor !== 0 && item.quantidadeSabor !== undefined) {
    setArrayItens({
      borda: bordaAtual,
      nome: nome,
      observacao: observacao,
      pratos: quantidadePratos,
      tipo: "sabor",
      quantidade: [{ ...arrayItens ? .quantidade,
        pronome : item.pronome,
        quantidadeSabor: item.quantidadeSabor
      }]
    });
  }
})

expected output:

arrayItens: {
    borda: 'foo',
    nome: "bar",
    observacao: "...",
    pratos: 5,
    tipo: "sabor", 
    quantidade: [
        {
            pronome: "foo",
            quantidadeSabor: 1
        },
        {
            pronome: "foo2",
            quantidadeSabor: 2
        }
    ]   
}

Upvotes: 0

Views: 1253

Answers (1)

T J
T J

Reputation: 43166

If I understood correctly, your code should be something like this:

setArrayItens((prevArrayItens) => ({
  ...prevArrayItens,
  quantidade: sabores.map(({pronome, quantidadeSabor}) => quantidadeSabor && {
    pronome,
    quantidadeSabor
 })
})


const sabores = [{
    quantidadeSabor: 1,
    pronome: "foo",
    preco: "bar",
    checked: false
  },
  {
    quantidadeSabor: 2,
    pronome: "foo2",
    preco: "bar",
    checked: false
  }
]

const result = sabores.map(({
  pronome,
  quantidadeSabor
}) => quantidadeSabor && {
  pronome,
  quantidadeSabor
});

console.log(result);

Upvotes: 3

Related Questions