React Native，意外的关键字“This”

Question

Why I have an red error marks the dot after This Keyword? it says (Unexpected Keyword "This")

    render() {
    return (
        <TouchableOpacity onPress={() => this.selectionOnPress({this.props.detail.country})}>
            <Text style={[styles.btnSV, {
                backgroundColor:
                    this.state.selectedButton === {this.props.detail.country} ? "red" : "grey"
            }]}>
                <Text style={styles.btnSV}>{this.props.detail.country}</Text>
            </Text>
        </TouchableOpacity>

    );
}}

Error image

Answer 1

Try this

render() {
    return (
        <TouchableOpacity onPress={() => this.selectionOnPress(this.props.detail.country)}>
            <Text style={[styles.btnSV, {
                backgroundColor:
                    this.state.selectedButton === this.props.detail.country ? "red" : "grey"
            }]}>
                <Text style={styles.btnSV}>{this.props.detail.country}</Text>
            </Text>
        </TouchableOpacity>

    );
}}

I basically removed surrounding curly brackets from 1st and 2nd instances of this.props.detail.country Within JS, these curly brackets are object notation and are missing property names. 3rd instance is JSX template variable.