cannot destruct the style object - reactjs

Question

I'm trying to deconstruct the style object but it gives me error on the line const { errorTextStyle } = myStyle; saying: Unexpected token (8:8)".
Below is the whole code:
import React, { Component } from 'react';
import { Platform, Dimensions, Text } from 'react-native';
import { Card, CardSection, Button, Input } from './common';
class LoginForm extends Component {
/////////////////////
state = {email: '', password: '', error: ''};
const { errorTextStyle } = myStyle;
///////////////////// methods
onButtonPress(){
const { email, password } = this.state;
firebase.auth().signInWithEmailAndPassword(email,password).
catch(() => {
firebase.auth().createUserWithEmailAndPassword(email,password).
catch(() => {
this.setState({error: 'Authentication Failed.'});
});
});
}
////////////////////// render
render(){
return(
<Card>
<CardSection >
<Input
placeholder="Type here :)"
onChangeText={ email => this.setState({ email }) }
value={ this.state.email }
label={ 'Email: ' }
autoCorrect={false}
/>
</CardSection >
<CardSection >
<Input
placeholder="Type here :)"
onChangeText={ password => this.setState({password}) }
value={this.state.password}
label={'Password: '}
autoCorrect={false}
secureTextEntry
/>
</CardSection >
<Text style={ errorTextStyle }>
{this.state.error}
</Text>
<CardSection>
<Button onPress={this.onButtonPress.bind(this)}>
Login :)
</Button>
</CardSection>
</Card>
);
}
}
const myStyle = {
errorTextStyle: {
fontSize: 20,
alignSelf: 'center',
color: 'red'
}
};
export default LoginForm;

Answer 1

Since the variable is being used inside render, move that code inside that method. You can only declare methods and fields inside the class declaration, expressions must go inside a method. state = ... is working for you because that's a field declaration. Try the following:
render(){
const { errorTextStyle } = myStyle;
...
}