How to reference a component from another component in Settings question

[DanMacLeod]

On my Settings page, I need to update a TextInput label when a user selects an option from a Select component. I want to do this from the Select onSelection event. Is there a way to reference the TextInput component from the Select component (both are on the Settings page)?

[Gondwana · Accepted solution]

I don't know, but if it's possible, you may need to think in terms of React rather than how you'd do it in an HTML+JS web page.

I'd experiment with making the TextInput label depend on a setting; something like (but almost certainly not)

label={props.settingsStorage.getItem('desiredLabelSettingKey')}

The, in onSelection, try something like (but almost certainly not)

props.settingsStorage.setItem('desiredLabelSettingKey', 'New label')

[DanMacLeod]

Thanks for the suggestions, I got it to work using the following code:

SELECT COMPONENT

onSelection={(selection) => {
let format = selection.values[0].value;
if ( format === constants.FORMAT_X ) {
     props.settingsStorage.setItem('formatKey', JSON.stringify({'name': 'Data X'}));
} else if ( format === constants.FORMAT_Y ) {
    props.settingsStorage.setItem('formatKey', JSON.stringify({'name': 'Data Y'}));
} else {
   props.settingsStorage.setItem('formatKey', JSON.stringify({'name': 'Data Default'}));
}
}}

TEXTINPUT COMPONENT

label={
(typeof props.settings.format === constants.UNDEFINED ) ? "Default Txt" : JSON.parse(props.settingsStorage.getItem('formatKey')).name
}