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

Activity

1. U-DI-Page commented on Sep 28, 2020

   

   U-DI-Page

   on Sep 28, 2020

   Author

   More actions

   
2. gregg-cbs commented on Apr 14, 2021

   

   gregg-cbs

   on Apr 14, 2021

   Last edited by gregg-cbs

   More actions

   @FourPig

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

   <div key={`list1-${item.id}`}
   
3. AbhisheshPradhan commented on Jul 7, 2021

   

   AbhisheshPradhan

   on Jul 7, 2021

   More actions

   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,
       }}
   >
   
4. Ashkur commented on Jul 7, 2021

   

   Ashkur

   on Jul 7, 2021

   More actions

   Same thing. Have you solve it?
5. U-DI-Page commented on Jul 12, 2021

   

   U-DI-Page

   on Jul 12, 2021

   Author

   More actions

   @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
6. U-DI-Page commented on Jul 12, 2021

   

   U-DI-Page

   on Jul 12, 2021

   Author

   More actions

   Same thing. Have you solve it?

   acturally not
7. U-DI-Page commented on Jul 12, 2021

   

   U-DI-Page

   on Jul 12, 2021

   Author

   More actions

   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
8. AbhisheshPradhan commented on Jul 12, 2021

   

   AbhisheshPradhan

   on Jul 12, 2021

   More actions

   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.