React Native: Render different component based on button press

Question

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 add , remove , and history .

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.

    const ChoiceContainer = props => {
      const {children} = props;

      render(<View>{children}</View>);
    };


    const AddEntry = () => (
      <ChoiceContainer>
        <Card>
          <View style={{paddingLeft: 5}}>
            <Text style={styles.cardTitle}>Component 1</Text>
          </View>
        </Card>
      </ChoiceContainer>
    );

    const RemoveEntry = () => (
      <ChoiceContainer>
        <Card>
          <View style={{paddingLeft: 5}}>
            <Text style={styles.cardTitle}>Component 2</Text>
          </View>
        </Card>
      </ChoiceContainer>
    );

    const EntryHistory = () => (
      <ChoiceContainer>
        <Card>
          <View style={{paddingLeft: 5}}>
            <Text style={styles.cardTitle}>Component 3</Text>
          </View>
        </Card>
      </ChoiceContainer>
    );

    export default class EntryTabs extends Component {
      showAdd = () => {
        this.setState({sceneType: 'add'});
      };

      showRemove = () => {
        this.setState({sceneType: 'receive'});
      };

      showHistory = () => {
        this.setState({sceneType: 'history'});
      };

      renderScene = type => {
        if (type === 'add') {
          return <AddEntry />;
        }

        if (type === 'remove') {
          return <RemoveEntrty />;
        }

        if (type === 'history') {
          return <EntryHistory />;
        }
      };

      render() {
        const {sceneType} = this.state;

        render(
<SafeAreaView>

<View style={{flex: 1}}>
                  return (
                    <EntryCard
                    />
                  );
                })}
          <View style={{flex:1}}>
            <View>
              <TouchableOpacity onPress={this.showAdd}>
    <Text> Add </Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.showRemove}>
    <Text> Remove </Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.showHistory}>
    <Text> History </Text>
              </TouchableOpacity>
            </View>
            <View>{this.renderScene(sceneType)}</View>
          </View>,
</View>
</SafeAreaView>
        );
      }
    }

Any help/guidance would huge hugely appreciated. Thanks!

Answer 1

You have not defined the state, And you have to use map to show the entries.

The working version of you code should be as below.

const value1 = 1,
  value2 = 2,
  value3 = 3;

const entries = [
  {
    key1: value1,
    key2: value2,
    key3: value3,
  },
  {
    key1: value1,
    key2: value2,
    key3: value3,
  },
  {
    key1: value1,
    key2: value2,
    key3: value3,
  },
  {
    key1: value1,
    key2: value2,
    key3: value3,
  },
  {
    key1: value1,
    key2: value2,
    key3: value3,
  },
];

const ChoiceContainer = (props) => {
  const { children } = props;

  return <View>{children}</View>;
};

const AddEntry = () => (
  <ChoiceContainer>
    <Card>
      <View style={{ paddingLeft: 5 }}>
        <Text style={styles.cardTitle}>Add Entry</Text>
      </View>
    </Card>
    <TextInput value={entries.key1} />
  </ChoiceContainer>
);

const RemoveEntry = () => (
  <ChoiceContainer>
    <Card>
      <View style={{ paddingLeft: 5 }}>
        <Text style={styles.cardTitle}>Remove Entry</Text>
      </View>
    </Card>
    <TextInput value={entries.key2} />
  </ChoiceContainer>
);

const EntryHistory = () => (
  <ChoiceContainer>
    <Card>
      <View style={{ paddingLeft: 5 }}>
        <Text style={styles.cardTitle}>Entry History</Text>
      </View>
    </Card>
    <TextInput value={entries.key3} />
  </ChoiceContainer>
);

class EntryTabs extends React.Component {
  state = {
    sceneType: 'add',
  };

  showAdd = () => {
    this.setState({ sceneType: 'add' });
  };

  showRemove = () => {
    this.setState({ sceneType: 'receive' });
  };

  showHistory = () => {
    this.setState({ sceneType: 'history' });
  };

  renderScene = (type) => {
    if (type === 'add') {
      return <AddEntry />;
    }

    if (type === 'remove') {
      return <RemoveEntry />;
    }

    if (type === 'history') {
      return <EntryHistory />;
    }
  };

  render() {
    const { sceneType } = this.state;

    return (
      <SafeAreaView>
        <View style={{ flex: 1 }}>
          {entries.map((item) => {
            return (
              <EntryHistory
                baseAsset={item.key1}
                logo={item.key2}
                screen={item.key3}
              />
            );
          })}
          <View style={{ flex: 1 }}>
            <View>
              <TouchableOpacity onPress={this.showAdd}>
                <Text> Add </Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.showRemove}>
                <Text> Remove </Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.showHistory}>
                <Text> History </Text>
              </TouchableOpacity>
            </View>
            <View>{this.renderScene(sceneType)}</View>
          </View>
          ,
        </View>
      </SafeAreaView>
    );
  }
}

function CustomText(props) {
  const [showMore, setShowMore] = React.useState(false);
  const [lines, setLines] = React.useState(props.numberOfLines);

  const onTextLayout = (e) => {
    setShowMore(
      e.nativeEvent.lines.length > props.numberOfLines && lines !== 0
    );
  };

  return (
    <View>
      <Text numberOfLines={lines} onTextLayout={onTextLayout}>
        {props.children}
      </Text>
      &&{' '}
      {showMore && (
        <Button
          title="Show More"
          onPress={() => {
            setLines(0);
            setShowMore(false);
          }}
        />
      )}
      {!showMore && (
        <Button
          title="Hide More"
          onPress={() => {
            setLines(props.numberOfLines);
          }}
        />
      )}
    </View>
  );
}