A very very strange issue in duplicate element id

Using Streamlit
,
1

My app is local.
It is deployed manually.
streamlit.errors.StreamlitDuplicateElementId: There are multiple button elements with the same auto-generated ID. When this element is created, it is assigned an internal ID based on the element type and provided parameters. Multiple elements with the same type and parameters will cause this error.

To fix this error, please pass a unique key argument to the button element.

Traceback:

File 
    if left1.button("x = 3", use_container_width=True):
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^File "/Library/Frameworks/Python.framework/Versions/3.12/lib/python3.12/site-packages/streamlit/runtime/metrics_util.py", line 409, in wrapped_func
    result = non_optional_func(*args, **kwargs)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^File "/Library/Frameworks/Python.framework/Versions/3.12/lib/python3.12/site-packages/streamlit/elements/widgets/button.py", line 238, in button
    return self.dg._button(
           ^^^^^^^^^^^^^^^^File "/Library/Frameworks/Python.framework/Versions/3.12/lib/python3.12/site-packages/streamlit/elements/widgets/button.py", line 907, in _button
    element_id = compute_and_register_element_id(
                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^File "/Library/Frameworks/Python.framework/Versions/3.12/lib/python3.12/site-packages/streamlit/elements/lib/utils.py", line 226, in compute_and_register_element_id
    _register_element_id(ctx, element_type, element_id)File "/Library/Frameworks/Python.framework/Versions/3.12/lib/python3.12/site-packages/streamlit/elements/lib/utils.py", line 132, in _register_element_id
    raise StreamlitDuplicateElementId(element_type)

Here is the code:

‘’'Python <left, middle, right = st.columns(3)
if left.button(“x = 3”, use_container_width=True):
left.markdown(“That is correct! Since we divide the number alone by the number with the ‘x’ between, we get 9 / 3, which is 3. So, x = 3! If we plug x in x · 3 = 9, we get 3 · 3 = 9, which is true!”)
if middle.button(“x = 27”, use_container_width=True):
middle.markdown(“Wrong! Remember that you need to divide the number alone by the number with the ‘x’ between, not multiply. So, since we get 9 / 3, not 9 · 3, we get 3, So, x = 3! If we plug x in x · 3 = 9, we get 3 · 3 = 9, which is true!”)
if right.button(“x = 12”, use_container_width=True):
right.markdown(“Wrong! Remember that you need to divide the number alone by the number with the ‘x’ between, not adding. So, since we get 9 / 3, not 9 + 3, we get 3, So, x = 3! If we plug x in x · 3 = 9, we get 3 · 3 = 9, which is true!”)

st.write(“2.”)
st.latex(r’‘’
2 · x = 8.‘’‘)
st.latex(r’‘’
x = ?‘’')

left, middle, right = st.columns(3)
if left.button(“x = 5”, use_container_width=True):
st.write(“Wrong! Remember that you need to divide the number alone by the number with the ‘x’ between. So, since we get 8 / 2, we get 4, So, x = 4! If we plug x in x · 2 = 8, we get 4 · 2 = 8, which is true!”)
if middle.button(“x = 10”, use_container_width=True):
st.write(“Wrong! Remember that you need to divide the number alone by the number with the ‘x’ between, not add! So, since we get 8 / 2, we get 4, So, x = 4! If we plug x in x · 2 = 8, we get 4 · 2 = 8, which is true!”)
if right.button(“x = 4”, use_container_width=True):
right.markdown(“Correct! Since we need to divide the number alone by the number with the ‘x’ between, we get 8 / 2, So, x = 4! If we plug x in x · 2 = 8, we get 4 · 2 = 8, which is true!”)
st.write(“3.”)
st.latex(r’‘‘x · -3 = 6
‘’’)
st.latex(r’'‘x = ?
‘’’)
left1, middle2, right3 = st.columns(3)
if left.button(“x = 3”, use_container_width=True):
st.write(“Wrong! Remember that you need to divide the number alone by the number with the ‘x’ between, not add. So, since we get 6 / -3, we get -2, So, x = -2! If we plug x in x · -3 = 6, we get -2 · -3 = 6, which is true!”)
if middle.button(“x = -2”, use_container_width=True):
st.write(“That’s right! You need to divide the number alone by the number with the ‘x’ between, and since we get 6 / -3, we get -2, So, x = -2! If we plug x in x · -3 = 6, we get -2 · -3 = 6, which is true!”)
if right.button(“x = 4”, use_container_width=True):
right.markdown(“Wrong! Since we need to divide the number alone by the number with the ‘x’ between, we get 6 / -3, So, x = -2! If we plug x in x · -3 = 6, we get -2 · -3 = 6, which is true!”)
The error is in “if left.button(“x = 3”, use_container_width=True):”
Streamlit V1.41.1
:smiley:

2

Can you edit and repost this so your code is within the correct markers, like this:

```python   <your code here>   ```
3

From Documentation,
st.button(label, key=None, help=None, on_click=None, args=None, kwargs=None, *, type=“secondary”, icon=None, disabled=False, use_container_width=False)

key (str or int)

An optional string or integer to use as the unique key for the widget. If this is omitted, a key will be generated for the widget based on its content. No two widgets may have the same key.

Example
st.button(“x = 3”,key = “three”, use_container_width=True):
st.button(“x= 27”, key = “TwemntySeven” , use_container_width=True):

Hope this helps!

Specify yourself the key to make the buttons unique , if not automatic generation may sometimes have issues.

1 Like
4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.