fitbitconditionalRendering.jsx

function WarningBanner(props) {
 if (!props.warn) {
   return null;
 }

 return (
   <Section>
     <Text>Hai.</Text>
   </Section>
 );
}

class SettingsPage extends SettingsComponent {
 constructor(props) {
   super(props);
   this.state = {showWarning: true}
   this.handleToggleClick = this.handleToggleClick.bind(this);
 }

 handleToggleClick() {
   this.setState(prevState => ({
     showWarning: !prevState.showWarning
   }));
 }

 render() {
   return (
     <Page>
       <WarningBanner warn={this.state.showWarning} />
       <Section>
         <Button
           label="Toggle"
           onClick={ this.handleToggleClick }
         />
       </Section>
     </Page>
   );
 }
}

function mySettings(props) {
 return (
   <SettingsPage />
 );
}

registerSettingsPage(mySettings);