Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

216
Visualizações
React: pushing an updated object to an array when index is dynamic and changing

I have this layout below that if you click on any Tiles under each Category, it should push that tile to the dashboard on the right while also removing that tile from the sidebar. After I clicked on Tile 0 for example, it got removed from the sidebar and got added to Category 3 under Tile 0 on the right hand side dashboard.

My current dashboard state has this shape after the first add tile click:

[
   0: {
      id: 0,
      name: 'Category 3',
      tiles: [
         0: {
            category: 'Category 3',
            id: 'tile0',
            name: 'Tile 0'
         },
      ]
   }
]

The problem comes when I try to add the second tile of Categories that are not in order (Adding tiles from Category 2 first for example) Here is a portion my code:

const handleAddTiles = (categoryName, categoryIndex) {
    
    tiles.forEach(tile => {

       const categoryExists = dashboardState.map(category => 
       category.name).includes(tile.category)

       if (categoryExistOnDashboard) {
          setDashboardState((prevState) => {
             const categories = [...prevState];
             const categoryToUpdate = { ...categories[categoryIndex] }; // prints the state above
             const categoryTiles = [...categoryToUpdate.tiles, tile ]; // adds a new tile
             categoryToUpdate.tiles = categoryTiles; // replace previous tiles with new tiles

             // categories[categoryIndex] below is faulty indexing logic
             categories[categoryIndex] = { ...categoryToUpdate };

             return [...categories]; // set the state to our new copy
       }) 
       }
    })  
}

The above code works by grabbing the Category index from the sidebar when I click on the tiles, and it only works if I add down the list in order due to indexing. The problem is now if I decide to add tiles from Category 2 first for example, the categoryIndex would be 2 but on the dashboard it's index would be 0 since it's the only Category on there. So the categoryToUpdate would be undefined since it can't find index 2 on the dashboard. I can't think of a way to correctly grab the right object from the dashboard state in order to update my state to save my life. I thought about using categoryName to match my item but no idea how to use that to replace categories[categoryIndex].

Thank you in advance!!

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda