streamlit.errors.StreamlitDuplicateElementKey: There are multiple elements with the same `key='left_TaskD'`. To fix this, please make sure that the `key` argument is unique for each element you create

Using Streamlit
, ,
1

dear sir

I have observed that my code executes without issue when no new items are appended; nevertheless, when I attempt to append a new item to st.session_state.my_items[“col_left”], which functions as a list or array, an error is generated. I have included the error message and the pertinent code below so that you may assist me in resolving this issue and providing the correct implementation along with an appropriate solution.

import streamlit as st

from streamlit_dnd import dnd, apply_move

if “my_items” not in st.session_state:

st.session_state.my_items = {

    "col_left": \["TaskA", "TaskB", "TaskC", \],

}

st.session_state.my_items[“col_left”].append(“TaskD”)

st.session_state.my_items[“col_left”].append(“TaskE”)

st.session_state.my_items[“col_left”].append(“TaskF”)

st.session_state.my_items[“col_left”].append(“TaskG”)

st.session_state.my_items[“col_left”].append(“TaskH”)

st.session_state.my_items[“col_left”].append(“TaskI”)

st.session_state.my_items[“col_left”].append(“TaskJ”)

st.session_state.my_items[“col_left”].append(“TaskK”)

def handle_click(index, caption):

st.success(f"Button clicked! Index: {index}, Caption: {caption}")

col1, = st.columns(1)

# 2. Render Left Container (Key must EXACTLY match the dictionary key)

with col1:

st.subheader("Left Column")

with st.container(key="col_left", border=True):

    for index, item in enumerate(st.session_state.my_items\["col_left"\]):

        with st.container(key=f"left\_{item}", border=True):



            st.button(label=item,  on_click=handle_click, args=(index, item) )

event = dnd(list(st.session_state.my_items.keys()))

if event is not None:

\# Ensure st.session_state.my_items matches the structure { "col_left": \[...\], "col_right": \[...\] }

apply_move(event, st.session_state.my_items)

st.rerun()

streamlit.errors.StreamlitDuplicateElementKey: There are multiple elements with the same `key=‘left_TaskD’`. To fix this, please make sure that the `key` argument is unique for each element you create.

File “D:\pyff\forhelp.py”, line 29, in
with st.container(key=f"left_{item}", border=True):
~~~~~~~~~~~~^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File “C:\Users\user\AppData\Local\Programs\Python\Python314\Lib\site-packages\streamlit\runtime\metrics_util.py”, line 596, in wrapped_func
result = non_optional_func(*args, **kwargs)
File “C:\Users\user\AppData\Local\Programs\Python\Python314\Lib\site-packages\streamlit\elements\layouts.py”, line 390, in container
block_proto.id = compute_and_register_element_id(
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^
“container”, user_key=key, dg=None, key_as_main_identity=False
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
)
^
File “C:\Users\user\AppData\Local\Programs\Python\Python314\Lib\site-packages\streamlit\elements\lib\utils.py”, line 261, in compute_and_register_element_id
_register_element_id(ctx, element_type, element_id)
~~~~~~~~~~~~~~~~~~~~^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File “C:\Users\user\AppData\Local\Programs\Python\Python314\Lib\site-packages\streamlit\elements\lib\utils.py”, line 143, in _register_element_id
raise StreamlitDuplicateElementKey(user_key)

{1B48FD59-8F1F-4112-8905-EFEE3321305F}.png

2

Welcome to the Streamlit community, and thanks for sharing your code and error! :balloon: The error StreamlitDuplicateElementKey: There are multiple elements with the same key=‘left_TaskD’ means that your list st.session_state.my_items[“col_left”] contains duplicate values (e.g., “TaskD” appears more than once), so when you use f"left_{item}" as the container key, Streamlit tries to create multiple containers with the same key, which is not allowed. Keys for Streamlit elements must be unique across the page—if your list has repeated items, this will always cause a duplicate key error.

To fix this, ensure that each key is unique by including the index in the key, like f"left_{index}_{item}". Here’s the corrected code pattern:

import streamlit as st
from streamlit_dnd import dnd, apply_move

if "my_items" not in st.session_state:
    st.session_state.my_items = {
        "col_left": ["TaskA", "TaskB", "TaskC"],
    }

# Only append new items if they are not already present
for task in ["TaskD", "TaskE", "TaskF", "TaskG", "TaskH", "TaskI", "TaskJ", "TaskK"]:
    if task not in st.session_state.my_items["col_left"]:
        st.session_state.my_items["col_left"].append(task)

def handle_click(index, caption):
    st.success(f"Button clicked! Index: {index}, Caption: {caption}")

col1, = st.columns(1)
with col1:
    st.subheader("Left Column")
    with st.container(key="col_left", border=True):
        for index, item in enumerate(st.session_state.my_items["col_left"]):
            with st.container(key=f"left_{index}_{item}", border=True):
                st.button(label=item, on_click=handle_click, args=(index, item))

event = dnd(list(st.session_state.my_items.keys()))
if event is not None:
    apply_move(event, st.session_state.my_items)
    st.rerun()

This ensures all container keys are unique, even if item names repeat. For more on this pattern, see the Streamlit docs on widget keys and streamlit-dnd usage.

Sources: