React-native components state data

Question

please check the image

How do I change the following when each of the headers is clicked 1) Text colour and underline 2) The data that is shown below

The idea is for the user to click on the text which will then toggle the data below which changing the text. I know state must be used in some way with a helper function like onClick. But it would be great if anyone could explain specifically. Thanks

This is what my current code is //

export default class ExploreSection extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

     current: 0,
      mainText: "This is About"
    };
  }
  onPressTitle = index => {
    switch (index) {
      case 0:
        this.setState({ mainText: "This is About", current: 0 });
      case 1:
        this.setState({ mainText: "This is Detail", current: 1 });
      case 2:
        this.setState({ mainText: "This is People", current: 2 });
    }
  };


  render() {
    var style0 =
      this.state.current === 0 ? styles.selectedStyle : styles.normalStyle;
    var style1 =
      this.state.current === 1 ? styles.selectedStyle : styles.normalStyle;
    var style2 =
      this.state.current === 2 ? styles.selectedStyle : styles.normalStyle;
    return (

      <View>
        <View style={styles.middleBar}>
          <Text
            style={style0}
            onPress={() => {
              this.onPressTitle(0);
            }}
          >
            About
          </Text>
          <Text
            style={style1}
            onPress={() => {
              this.onPressTitle(1);
            }}
          >
            Detail
          </Text>
          <Text
            style={style2}
            onPress={() => {
              this.onPressTitle(2);
            }}
          >
            People
          </Text>
        </View>
        <View style={styles.details}>
          <Text style={{ fontSize: 14, letterSpacing: 2, lineHeight: 20 }}>
            Hey Guys! Its me jack, I would like to invite you guys for my BBQ
            party! Its been so long and it would be awesome to catch up with all
            of you guys. So whoever can make it please come!
          </Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  details: {
    //  flex: 5,
    paddingHorizontal: 10,
    paddingTop: 20
  },

  middleBar: {
    //  flex: 1.2,
    backgroundColor: "#fafafa",
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center"
  },
  selectedStyle: {
    fontSize: 16,
    color: "#FC0764"
  },
  normalStyle: {
    fontSize: 16
  }
});

Answer 1

In react-native the Text component have "onPress" prop that you can set a function to. The simplest way to do this is to set onPress for the 3 titles and change the bottom text based on the title that is pressed. Example:

create this.state and the function to change it:

this.state = {current: 0, mainText: 'This is About'};


onPressTitle=(index)=>{
   switch(index){
     case 0: 
        this.setState({mainText: 'This is About', current: 0})
        break;
     case 1:
        this.setState({mainText: 'This is Detail', current: 1})
        break;
     case 2: 
        this.setState({mainText: 'This is People', current: 2})
        break;
   }
}

then when rendering titles you check the current value in state to set the title's style:

var style0 = this.state.current === 0? selectedStyle : normalStyle;
var style1 = this.state.current === 1? selectedStyle : normalStyle;
var style2 = this.state.current === 2? selectedStyle : normalStyle;

<Text style={style0} onPress={()=>{this.onPressTitle(0}}>About</Text>
<Text style={style1} onPress={()=>{this.onPressTitle(1}}>Detail</Text>
<Text style={style2} onPress={()=>{this.onPressTitle(2}}>People</Text>

and rendering the text:

<Text>{this.state.mainText}</Text>

Answer 2

A clean way to handle this with maximal code re-use is to create a "Tab" component that manages the state for each of the individual Tabs. Your Page would then reuse the Tab component and also display the current Text. Here is how I would setup the Tab component

Tab.js

export default class Tab extends Component {
    state = {
        isSelected: false,
    }

    static propTypes = {
        title: PropTypes.string,
        text: PropTypes.string,
        onPress: PropTypes.func.isRequired,
    }

    onPress() {
        this.props.onPress(this.props.text);
    }

    render() {
        var style = this.state.isSelected ? selectedStyle : normalStyle;
        return <Text 
                  style={style} 
                  onPress={() => this.onPress()}>
                  {this.propstitle}
               </Text>

    }
}

Now, in your Page component you can initialize the 3 tabs and it should more or less handle itself

Page.js

export default class Page extends Component {
    state = {
        mainText = "Select a tab"
    }

    onTabPress(tabText) {
        this.setState({mainText: tabText});
    }

    render() {
        return (
            <View>
                <Tab title="About" text="stuff" onPress={this.onTabPress}/>
                <Tab title="Detail" text="stuff" onPress={this.onTabPress}/>
                <Tab title="People" text="stuff" onPress={this.onTabPress}/>
                {this.state.mainText}
            </View>
        )
    }
}

Now that the state and rendering of a tab is all handled by the Tab itself, the Page is able to cleanly use the Tabs to accomplish the goal.