title: React Native: Render different component based on button press
body: <p>I am new to React/React Native and am currently building a screen that consists of a section consisting of 3 buttons and a space below to render  different components depending on which tab button is pressed. The tabs are <code>add</code>, <code>remove</code>, and <code>history</code>.</p>
  
  <p>Basically the intent is to recreate something like the tabs component from React Bootstrap, but for React Native. I have seen the React Navigation tabs component, but I do not want the tabs to navigate to a different screen, just render a different component depending on which is clicked and have it fade into the section below the buttons.
  Below is a rough idea of how I am thinking of approaching the problem.</p>
  
  <pre><code>    const ChoiceContainer = props =&gt; {
        const {children} = props;
  
        render(&lt;View&gt;{children}&lt;/View&gt;);
      };
  
  
      const AddEntry = () =&gt; (
        &lt;ChoiceContainer&gt;
          &lt;Card&gt;
            &lt;View style={{paddingLeft: 5}}&gt;
              &lt;Text style={styles.cardTitle}&gt;Component 1&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/Card&gt;
        &lt;/ChoiceContainer&gt;
      );
  
      const RemoveEntry = () =&gt; (
        &lt;ChoiceContainer&gt;
          &lt;Card&gt;
            &lt;View style={{paddingLeft: 5}}&gt;
              &lt;Text style={styles.cardTitle}&gt;Component 2&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/Card&gt;
        &lt;/ChoiceContainer&gt;
      );
  
      const EntryHistory = () =&gt; (
        &lt;ChoiceContainer&gt;
          &lt;Card&gt;
            &lt;View style={{paddingLeft: 5}}&gt;
              &lt;Text style={styles.cardTitle}&gt;Component 3&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/Card&gt;
        &lt;/ChoiceContainer&gt;
      );
  
      export default class EntryTabs extends Component {
        showAdd = () =&gt; {
          this.setState({sceneType: 'add'});
        };
  
        showRemove = () =&gt; {
          this.setState({sceneType: 'receive'});
        };
  
        showHistory = () =&gt; {
          this.setState({sceneType: 'history'});
        };
  
        renderScene = type =&gt; {
          if (type === 'add') {
            return &lt;AddEntry /&gt;;
          }
  
          if (type === 'remove') {
            return &lt;RemoveEntrty /&gt;;
          }
  
          if (type === 'history') {
            return &lt;EntryHistory /&gt;;
          }
        };
  
        render() {
          const {sceneType} = this.state;
  
          render(
  &lt;SafeAreaView&gt;
  
  &lt;View style={{flex: 1}}&gt;
                    return (
                      &lt;EntryCard
                      /&gt;
                    );
                  })}
            &lt;View style={{flex:1}}&gt;
              &lt;View&gt;
                &lt;TouchableOpacity onPress={this.showAdd}&gt;
      &lt;Text&gt; Add &lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
                &lt;TouchableOpacity onPress={this.showRemove}&gt;
      &lt;Text&gt; Remove &lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
                &lt;TouchableOpacity onPress={this.showHistory}&gt;
      &lt;Text&gt; History &lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
              &lt;View&gt;{this.renderScene(sceneType)}&lt;/View&gt;
            &lt;/View&gt;,
  &lt;/View&gt;
  &lt;/SafeAreaView&gt;
          );
        }
      }
  </code></pre>
  
  <p>Any help/guidance would huge hugely appreciated. Thanks!</p>