Unexpected Token, expected ";" (33:20)


#1

I’m trying to follow the tutorial for React Native Quick Start My Query Based Sync ToDo App and I’m running into an error at the end of step 5. I’m getting this error when running the project.

My LoginForm.js file is pasted below

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
//We will add "react-native-router-flux in the next step
import { Actions } from "react-native-router-flux";
import Realm from "realm";

import { SERVER_URL } from "../constants";
import { Project, Item } from "../schemas";

import { Button } from "./Button";
import { ModalView } from "./ModalView";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  buttons: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

export class LoginForm extends Component {
  state = {};

  render() {
  }
}

componentDidMount() {
  // Check if we're already authenticated
  if (Realm.Sync.User.current) {
    this.onAuthenticated(Realm.Sync.User.current);
  } else {
    this.setState({ isModalVisible: true });
  }
}

render() {
  // Show the modal if the user is not authenticated
  const isAuthenticated = !!Realm.Sync.User.current;

  return (
    <View style={styles.container}>
      <ModalView
        placeholder="Please Enter a Username"
        confirmLabel="Login"
        isModalVisible={!isAuthenticated}
        handleSubmit={this.handleSubmit}
        error={this.state.error}
      />
      {isAuthenticated && (
        <View style={styles.buttons}>
          <Button onPress={this.onLogout}>Logout</Button>
          <Button onPress={this.onOpenProjects}>Go to projects</Button>
        </View>
      )}
    </View>
  );
}

handleSubmit = async nickname => {
  try {
    // Reset any previous errors that might have happened
    this.setState({ error: undefined });
    // Attempt to authenticate towards the server
    const user = await Realm.Sync.User.registerWithProvider(SERVER_URL, {
      provider: "nickname",
      providerToken: nickname
    });
    // Hide the modal
    this.setState({ isModalVisible: false });
    this.onAuthenticated(user);
  } catch (error) {
    this.setState({ isModalVisible: true, error });
  }
}

onAuthenticated(user) {
  // Create a configuration to open the default Realm
  const config = user.createConfiguration({
    schema: [Project, Item]
  });
  // Open the Realm
  const realm = new Realm(config);
  // Navigate to the main scene
  Actions.authenticated({ user, realm });
}

onLogout = () => {
    if (Realm.Sync.User.current) {
      Realm.Sync.User.current.logout();
      this.forceUpdate();
    }
};

onOpenProjects = () => {
    if (Realm.Sync.User.current) {
      this.onAuthenticated(Realm.Sync.User.current);
    }
};


#2

Seems like you have a closing curly bracket after render() on line 31. Also the empty render method can probably be removed.


#3

I appreciate the swift response. However, at this time, I’m running into further errors no matter what I do to this file.

Would you be willing to past the proper LoginForm.js file for me to replace mine?

This is the only file within this specific tutorial that is broken up. I believe I’ve placed some items out of order as the tutorial first supplies the skeleton for LoginForm.js then provides methods that I’m unsure if they simply go underneath or within the LoginForm class.


#4

There’s a link to the complete project at the bottom of the tutorial, although on my monitor the link color is very close to the regular text color, so maybe it’s not obvious. Anyway, here’s the complete code for your reference: https://github.com/realm/my-first-realm-app/tree/master/react-native