Получить значение свойства компонента в reactjs

Итак, я хочу сделать генератор имен, вот данные

export const dataGenerator = {
        gender: ["Male", "Female"],
        region: ["France", "Germany", "Italy", "Korea", "Russia"]
    }

мой компонент:

class NameGenerator extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            value: 0,
            name: "",
            surname: "",
            gender: "",
            region: "",

        }

        this.onClick = this.onClick.bind(this);

    }

    // handle change
    handleChangeEvent = (e, value) => {
        this.setState({ value})
    }

    onClick(e){
        if (e.keyCode === 32){
            fetch('https://uinames.com/api/')
            .then( res => res.json())
            .then(namedata => {
                this.setState({
                    name: namedata.name,
                    surname: namedata.surname
                })
            })
        }
    }

    componentDidMount(){
        fetch('https://uinames.com/api/')
        .then( res => res.json())
        .then( namedata => {
            this.setState({
                name: namedata.name,
                surname: namedata.surname,
                gender: namedata.gender,
                region: namedata.region
            })
        });

        window.addEventListener('keyup', this.onClick, false);
    }

    //Display Select Region
    selectRegion = (value) => {
        switch(value){
            case 0:
                return <TabContainer>{this.state.name} {this.state.surname}</TabContainer>;
            case 1:
                return <TabContainer>Germany</TabContainer>;
            case 2:
                return <TabContainer>Italy</TabContainer>;
            case 3:
                return <TabContainer>Korea</TabContainer>;
            case 4:
                return <TabContainer>Russia</TabContainer>;

            default: 
            return 'error'
        }
    };


    render(){
        const { dataGenerator } = this.props;
        const { value} = this.state;        
        return(
            <div>
                <AppBar position = "static" color = "default">
                    <Tabs
                        value = {value}
                        onChange = {this.handleChangeEvent}
                        indicatorColor = "primary"
                        textColor = "primary"
                        fullWidth
                    >
                        {dataGenerator.region.map( (section, i) => {
                            return (
                                <Tab key = {section} value = {i} label = {section}/>
                            )

                        })}

                    </Tabs>

                    {this.selectRegion(value)}
                    <div>

                    </div>

                </AppBar>

            </div>
        );
    }
}

у меня на самом деле 2 проблемы сначала я хочу отобразить компонент TabContainer сразу после компонента Tab без использования оператора switch. Я попытался сделать это, но получил сообщение об ошибке

{dataGenerator.region.map( (section, i) => {
    return (
            <Tab key = {section} value = {i} label = {section}/>

            value === {i} && <TabContainer>{section}</TabContainer>
    )

вот почему я использую оператор switch, но ищу альтернативу. И во-вторых, я хочу получить метку свойства из вкладки, чтобы использовать ее в качестве запроса в моем API-интерфейсе, например «https://uinames.com/api/?region=germany», поэтому, когда вы щелкаете его свойства, добавляйте его к запросу в извлечении api