react clone the same item form another list , and the item's key is repeat?

[U-DI-Page]

the item.id will repeat in container list, what should i do?

[U-DI-Page]

[gregg-cbs]

@FourPig

prefix your key with a property that is specific to that list?

<div key={`list1-${item.id}`}

[AbhisheshPradhan]

In my case, I'm cloning items from options (list 1) to canvas (list 2). I only want to update the canvas and not the options. For cloning and creating new ids for the options, I did the following for the options list

1. set the list prop as a state
2. setList to empty function so I can update the list items manually
3. trigger updating the list items using onEnd hook to update the ids

<ReactSortable
    list={optionsList}
    setList={() => {}}
    // After dropping, update the ids of options in list 1
    // This is done to make id unique for dropped elements by updating the ids in list 1
    onEnd={this._onDrop}
    {...sortableOptions}
    group={{
        name: 'options',
        pull: 'clone' as 'clone',
        put: false,
    }}
>

[Ashkur]

Same thing. Have you solve it?

[U-DI-Page]

@FourPig

prefix your key with a property that is specific to that list?

<div key={`list1-${item.id}`}

clone tow items to one list, the ids still will duplicate

[U-DI-Page]

Same thing. Have you solve it?

acturally not

[U-DI-Page]

In my case, I'm cloning items from options (list 1) to canvas (list 2). I only want to update the canvas and not the options. For cloning and creating new ids for the options, I did the following for the options list

1. set the list prop as a state
2. setList to empty function so I can update the list items manually
3. trigger updating the list items using onEnd hook to update the ids

<ReactSortable
    list={optionsList}
    setList={() => {}}
    // After dropping, update the ids of options in list 1
    // This is done to make id unique for dropped elements by updating the ids in list 1
    onEnd={this._onDrop}
    {...sortableOptions}
    group={{
        name: 'options',
        pull: 'clone' as 'clone',
        put: false,
    }}
>

it's complicated

[AbhisheshPradhan]

In my case, I'm cloning items from options (list 1) to canvas (list 2). I only want to update the canvas and not the options. For cloning and creating new ids for the options, I did the following for the options list

1. set the list prop as a state
2. setList to empty function so I can update the list items manually
3. trigger updating the list items using onEnd hook to update the ids

<ReactSortable
    list={optionsList}
    setList={() => {}}
    // After dropping, update the ids of options in list 1
    // This is done to make id unique for dropped elements by updating the ids in list 1
    onEnd={this._onDrop}
    {...sortableOptions}
    group={{
        name: 'options',
        pull: 'clone' as 'clone',
        put: false,
    }}
>

it's complicated

Update the id of the original list items after cloning.