Question about hiding/displaying Settings components

[DanMacLeod]

I have a TextArea on my Settings index.jsx. I can disable or enable the component based on a user selection but I would like to "hide" or not display the TextArea instead of just disabling it. Is this possible?

[Gondwana]

This can be done. See the Toggle examples.

[DanMacLeod]

I assume you are referring to the Toggle sample below? If so, can you explain how this hides/displays the Toggle? I'm missing something, thank you. ( (I had to remove HTML from the code snippet so I could post the code.)

<Toggle
  settingsKey="toggle"
  label="Toggle Switch"
/>

{ JSON.parse(settings.toggle || 'false') and <Toggle settingsKey="hiddenToggle" /> }

[DanMacLeod · Accepted solution]

I got this to work using the code below in my index.jsx file. If the Select component has a value of 'testing', then the TextInput component will be displayed.

{
(typeof props.settings.format !== constants.UNDEFINED && JSON.parse(props.settings.format).values[0].value === 'testing') && <TextInput type="text" maxLength="10" label="Test Label" settingsKey="testing" />
}