get component property value in reactjs

Question

So I want to do a name generator, here's data

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

my component :

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
    handleChange = (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.handleChange}
                        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>
        );
    }
}

there's actually 2 problems with me first I want to display TabContainer Component right after the Tab component without using the switch statement i tried to do this but its getting an error

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

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

that's why I'm using the switch statement but I'm looking for the alternative. And second I want to get the property label from the Tab to use it as query in my api fetch like " https://uinames.com/api/?region=germany " so when you click its properties get add to the query in fetch api

Answer 1

already solved it

i just add

onClick={((e) => this.getSection(e, section))}

in

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

    )

some people say you shouldn't put anonymous function like that even the doc in react said it but that's what react doc do and that's the only way i can think of now, here's the getSection code

getSection = (e, section) => {
        this.setState({
            region: section
        })

    }