undefined is not a function in React Native

Question

I'm trying to make an API call in React Native to handle user authentication. I'm passing this.state.email and this.state.password (both bound to text inputs) to a function in my services/ folder, where the call is made. Afterwards, the screen should navigate to the home stack or return an error. This is my login screen code:

import AuthService from ...

export default class LoginScreen extends Component {
    constructor(props) {
        super(props);
        this.login = this.login.bind(this);
        this.state = {
            email: '',
            password: '',
        };
    }

    login() {
        AuthService.login(this.state.email, this.state.password)
            .then(this.props.navigation.navigate('Main')) //Move to home screen
            .catch(console.error('Error')); //Handle error
    }

    render() {
        return (
            <View>
                <TextInput
                    onChangeText={email => this.setState({ email })}
                    value={this.state.email}
                />
                <TextInput
                    onChangeText={password => this.setState({ password })}
                    value={this.state.password}
                />
                <TouchableOpacity onPress={this.login}>
                    <Text style={styles.text}>Submit</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

And this is my AuthService function:

login(email, password) {
        // Check if credentials exist
        if (!email || !password) {
            return undefined;
        }

        return fetch(
            `${AUTH_ROOT}/login`,
            {
                method: 'POST',
                body: { email, password },
            }
            .then(
                res => {
                    const data = { ...res.data };
                    if (!data) {
                        throw new Error('No user returned from auth service');
                    }
                },
                res => {
                    context.error = 'Could not login';
                    console.log(res);
                }
            )
        );
    },

But I'm getting the error:

> undefined is not a function (near '...{
>     method: 'POST',
>     body: {
>         email: email,
>         password: password,
>     } }.then...')

What does this mean? Is my call not done correctly?

Answer 1

login(email, password) {
        // Check if credentials exist
        if (!email || !password) {
            return undefined;
        }

        return fetch(
            `${AUTH_ROOT}/login`,
            {
                method: 'POST',
                body: { email, password },
            }
        )
            .then(
                res => {
                    const data = { ...res.data };
                    if (!data) {
                        throw new Error('No user returned from auth service');
                    }
                },
                res => {
                    context.error = 'Could not login';
                    console.log(res);
                }
            )
    },

The right syntax for fetch is

fetch(url, params).then()

instead you had

fetch(url, params.then())