Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React side of custom component does not receive default value

See original GitHub issue

Summary

When I build a custom component I can specify a default value in the python code. I need to specify a default value in the React component again, and they don’t need to have the same value. This can/will lead to unexpected behaviour when they are not aligned.

Steps to reproduce

Check out the example custom component
Change component_value = _component_func(name=name, key=key, default=0) to component_value = _component_func(name=name, key=key, default=5)
Click the button

Expected behavior:

I expect to be able to set the initial value in the react component

Actual behavior:

There is no alignment possible between python part of the component and the react side. Only way to solve this is to hard code it at two places.

Is this a regression?

Debug info

Streamlit version: 0.63.0
Python version: 3.7.6
Using Conda? pip
OS version: osx
Browser version: chrome 83.0

Additional information

If needed, add any other context about the problem here. For example, did this bug come from https://discuss.streamlit.io or another site? Link the original source here!

Issue Analytics

State:
Created 3 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

2reactions

tconklingcommented, Jul 22, 2020

Hey @koenvo - yeah, the default value is not currently passed to the frontend. (Nor is the key.) This is on the list of things to do, but it didn’t get in for the launch.

1reaction

tconklingcommented, Mar 29, 2021

Yep - this was added in https://github.com/streamlit/streamlit/pull/2405. I’ll close now!

Top Results From Across the Web

React component's defaultValue does not work - Stack Overflow

I'm trying to use a fetched value from DB as a default value (shown until the component is clicked) of an input field....

Uncontrolled Components - React

Default Values Changing the value of defaultValue attribute after a component has mounted will not cause any update of the value in...

Typing React Context to avoid an undefined default value

The custom hook. The custom hook will take care of handling the sidebar state and will return the current state and the setState...

React useState does not seem to accept a default value here?

To fix this you'll need to avoid mounting the component until the desired default value is available. Alternatively you could probably do something...

The Guide to Learning React Hooks (Examples & Tutorials)

The side-by-side below shows how the component has lost a little weight. We not only save about five lines of code, but the...