CODEWITHSUNDEEP
javascriptarraysreactjsreact-hooks
Kusnadi
Kusnadi

Reputation: 75

React manage array multidimensional by its index

I have a problem how to update(in this case Add or Remove Cargo) my multidimensional array based on the selected index. The parent array has been successful, but I am confused for the child how to process the data when clicking the Add Cargo button to add cargo and the Remove Cargo button to delete all cargo based on the selected index.

Please help. This is my codesandbox code

Sorry for the view, maybe is not good enough

Upvotes: 0

Views: 32

Answers (1)

gdh
gdh

Reputation: 13682

You will need to provide index to the functions to add and/or delete cargos. In the function update the nested fields by mapping over the inputFields. While calling the handleAddCargo, pass the index and while calling handleRemoveCargo, pass the index as well as finalIndex which is the cargo array index.

const handleAddCargo = (parentFiledIndex) => {
        const updatedInputFields = inputFields.map((item, i) => {
            if(parentFiledIndex === i){
                return {...item, cargo: item.cargo.concat({
                        cargoId: '',
                        cargoDescription: "",
                        cargoHsCode: ""
                    })}
            }else{
                return item
            }
        });
        setInputFields(updatedInputFields);
        console.log("add by its index cargo here");
    };

    const handleRemoveCargo = (parentFiledIndex, cargoIndex) => {
        const updatedInputFields = inputFields.map((item, i) => {
            if(parentFiledIndex === i){
                return {...item, cargo: item.cargo.filter((cargo, c) => c !== cargoIndex)}
            }else{
                return item
            }
        });
        setInputFields(updatedInputFields);
        console.log("remove by its index cargo here");
    };

updated working solution is here

https://codesandbox.io/s/reverent-bose-c2nkk

quick note -

  • try not to use array indexes while rendering lists. For eg, use some library to generate unique id

Upvotes: 2

Related Questions