Trouble with integrating basic box creation algorithm with React, Redux

Hello,

I am working on creating a basic box creation program that allows the users to create boxes and delete them from the webpage.

“CL1” Is the ID and the color is just a test of storing data for each box.

I decided to use a basic Redux store the information about each box:

     {
     CL1: {
       id: "CL1"
       color: "#efefef"
       removeBox: (f) removeBox
     }
      CL2: {
       id: "CL2"
       color: "#efefef"
       removeBox: (f) removeBox
     }
     }

Then, In the main Presentational component, I would loop through and create Box's with this data. The data from the store would become the props for the boxes

I also map multiple functions and the state to pass into my presentational component. I commented the code so it it can be understood.

The state of the store gets passed as a prop to presentational. presentational then makes the boxes based on the data sent in. The presentational component contains a (non-component) box that includes functions to create a box or delete all boxes. I use a handler for the create box because of the use of parameters. The removeBox function mapped to presentational gets passed to each box.

The issue is that, when multiple boxes are created (such as in the picture above), the “remove this box” function does not work. When looking at the store, it deletes the wrong box despite deleting based on the ID. I tried everything over the past few days and can’t understand why it doesn’t work. Sometimes, it can’t delete any boxes at all.

Generates CL1, CL2, CL3.

Deleting CL1 deletes CL3.

function reducer(state = { metaData: 0 }, action) {
  // Create copy of the store
  let newState = Object.assign({}, state);
  switch (action.type) {
    case CREATE_BOX:
      // Everytime I create a box, increase the metadata by 1
      newState.metaData += 1;
      // Create new id based on metadata, use that id for the box
      let newID = CL + newState.metaData;
      newState[newID] = {
        layerType: action.layerType,
        color: action.color,
        id: newID
      };
      return newState;
    case REMOVE_BOX:
      // Deletes id from store.
      // Once Id has been used, such as CL1, deleting it and creating another box goes straight to CL2. You can't reuse a ID
      console.log("Reducer REMOVE_BOX", action.id);
      console.log("Old", newState);
      delete newState[action.id];
      console.log("New", newState);
      return newState;
    case REMOVE_ALL_BOX:
      return { metaData: 0 };
    default:
      return newState;
  }
}

Any ideas?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.