react-beautiful-dnd - appending index to label

Question

I have the following code:

<DragDropContext onDragEnd={onDragEnd}>
          <Droppable droppableId="droppable">
            {(provided) => (
              <div className="droppable" {...provided.droppableProps} ref={provided.innerRef}>
            {customgearUpdate?.length && customgearUpdate?.map((el, i) => {
                return (
                    <Draggable key={'item-'+i} draggableId={'item-'+i} index={i}>
                      {(provided) => (
                        <Accordion disableGutters={true}>
                        <AccordionSummary expandIcon={<ExpandMoreIcon />} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                        <Typography>{el.label}</Typography>
                        </AccordionSummary>
                        <AccordionDetails>
                    <>
                            <TextField
                                InputLabelProps={{ shrink: true, }}
                                style={{ width: '100%' }}
                                id="standard-basic"
                                label="Category"
                                value={el.label}
                                required={true}
                                name="Category"
                                onChange={(e) => onChangeHandler2(e, i)}
                                type="text"
                                variant="filled"
                            />
                        </>
...

onDragEnd is:

function onDragEnd(result) {
const newItems = [...customgearUpdate];
const [removed] = newItems.splice(result.source.index, 1);
newItems.splice(result.destination.index, 0, removed);
newItems[result.destination.index].label = result.destination.index + '. ' + newItems[result.destination.index].label;
setcustomgear(newItems);
}

I am trying to update the label of the item once dropped and then save it back to the array. The console for newItems shows me the label has been updated for this item, but when saving it then strips the label again.

My onSubmit

if (data[0].GearCategories.length) {
customgear.map(el => {
data[0].GearCategories.push(el)
})
}

Is there a simpler way to write the index back to the label (for sorting purposes), and why wont this save back to the array?

react-beautiful-dnd - appending index to label

0 Answers0