Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

218
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!