Why react native component is not rendered?

Question

I am trying to implement a team selector component to select the country and team for my react native application. To do this I have done a component implementation that contains 2 slide show component to select a country and related team. In the initial state, everything is okay but when I press the country arrow, the slide view to select team is being invisible. I am using the following slide view component;

https://github.com/kristerkari/pinar

And my components are like the following;

Team selector component;

export default class TeamSelectScreen extends Component {

  constructor(props) {
    super(props)
    this.state = {currentCountyIndex: 0, 
                  countries: [
                    {name: "england", logo: ""}, 
                    {name: "spain", logo: ""} 
                  ],
                  teams: [
                      [{name: "team1", logo : ""}, {name: "team2", logo : ""}, {name: "team3", logo : ""}],
                      [{name: "barca", logo : ""}, {name: "madrid", logo : ""}]
                    ] 
                }
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Select your team</Text>
        <Selector data={this.state.countries} onIndexChanged={(index) => {this.setState({currentCountyIndex : index})} }/>
        <Selector data={this.state.teams[this.state.currentCountyIndex]} onIndexChanged={(x) => {}}/>
      </View>
    )
  }
}

Selector component;

export default class Selector extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    return (
      <Carousel 
      loop={true}
      onIndexChanged={(index) => {this.props.onIndexChanged(index.index)} }>
        {this.props.data.map((value, index) => {
          console.log("value :", value)
          return (
            <View key={value.name} style={styles.slide1}>
              <Text style={styles.text}>{value.name}</Text>
            </View>
          )
        })}
      </Carousel>
    )
  }
}

Also, I have attached initial state and after pushing the country button:

Any idea?

Thanks.

Answer 1

I noticed that you export default same class name (TeamSelectScreen). Is it two separate files or the same?