How to fix Unexpected token, expected ";" error in React

Question

Pretty new to React so the problem might be very simple but I am getting the following error:

Unexpected token, expected ";" error .

The error occurs where the render() function is. How can I resolve this?

import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';

type Props = {};
export default class App extends Component{Props} {
  render() {
    return (
      <View style={styles.container}>
        <Text>style={styles.welcome}>Login To</Text>
        <Text>style={styles.design}>North Mall</Text>
        <TextInput
          style={styles.input}
          placeholder="Username"
          />
        <TextInput
          style={styles.input}
          placeholder="Password"
          secureTextEntry
        />
        <View style={styles.btnContainer}>
          <TouchableOpacity
            style={styles.userBtn}
            onPress={() => alert("Login Works")}
          >

            <Text style={styles.btnTxt}>Login</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.userBtn}
            onPress={() => alert("Signup Works")}
          >
            <Text style={styles.btnTxt}>Signup</Text>
          </TouchableOpacity>
        </View>
        </View>
      );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#0057ff'
  },
  welcome:{
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
    color: "#fff",
    fontFamily:"DancingScript-Bold"
  }
}}

The code continues but I am pretty sure that the error is in the first part of code.

Please remove type from top of the code i don't thing so there is data type or declear const or let — Vishal Dhanotiya, Dec 29 '19 at 08:31
@VishalDhanotiya I removed the type row and props in next line : export default class App extends Component { but now it gives Invariant Violation: objects are not valid as React child... — Ferda Ömeri, Dec 29 '19 at 08:50

score 0 · Answer 1 · answered Dec 29 '19 at 08:45

0

Change Component{Props} to Component<Props> if you want to implement a props interface.

Also type Props = {} is not what you want. You need to use an interface for your props like:

interface Props {
  someProp: string;
  someOtherProp: number;
  // etc
}

answered Dec 29 '19 at 08:45

Flagship1442

1,688
2
6
13

I didn't get it correctly.. I was just following a video and I don't know why exactly are we using the props , but it gives me error while it works on video – Ferda Ömeri Dec 29 '19 at 08:56
Could you share the link to your video? – Flagship1442 Dec 29 '19 at 09:01
Ok, so he's using 'Flow', which is often used to be explicit about the types of data you're using. As you were discussing in your other comments you can just remove it and your app should still run. But as you can see from the video he uses `` instead of `{Props}`, and I think this is what was causing your syntax error. – Flagship1442 Dec 29 '19 at 09:43
Both when I am writing instead of {Props} and when I remove type Props = {}; it gives the Invariant Violation error saying Objects are not valid as a React child.. – Ferda Ömeri Dec 29 '19 at 10:00
For now it might be best to remove altogether - this is also part of Flow, and to use flow you need to do some setup: https://create-react-app.dev/docs/adding-flow/ – Flagship1442 Dec 29 '19 at 10:04
Firstly thank you for your help. I will choose not to use Flow for now and remove type (whole row) and , is that all? because now I get 'Invariant Violation' error as I mentioned above. Is this error related to the same issue? – Ferda Ömeri Dec 29 '19 at 12:37
Could you post the whole error message? It should have some more details about exactly what it doesn't like. Also that `}}` at the end meant to be part of the code? If so you need to replace the last `}` with a `)` to close the `StyleSheet.create(...`. There are also references to styles that don't exist, but apart from that the syntax looks ok to me. If you can put the entire project on github and share that I might be able to take a closer look. – Flagship1442 Dec 29 '19 at 12:44
https://github.com/MsOmeri/Login-page/blob/master/App.js Objects are not valid as a React child (found: object with keys {fontSize, textAlign, margin, color, fontFamily}). If you meant to render a collection of children, use an array instead. in RCTText (at Text.js:159) in TouchableText (at Text.js:283) in Text (at App.js:10) in RCTView (at App.js:8) in App (at withExpoRoot.js:26) in RootErrorBoundary (at withExpoRoot.js:25) in ExpoRoot (at renderApplication.js:40) in RCTView (at AppContainer.js:101) in RCTView (at AppContainer.js:119) – Ferda Ömeri Dec 29 '19 at 14:38
Oh the error refers to this `style={styles.welcome}>Login To` and... `style={styles.design}>North Mall` You've tried to close the tags twice with an extra `>`. You need to remove the first right arrow in each case so the style props are inside the tag, like `Login To` – Flagship1442 Dec 29 '19 at 15:23
Thank you so much, you saved me.. One last question: did you run the code and got the same error message as I got ? if so how exactly did you find the syntax error, or did you just noticed it now? – Ferda Ömeri Dec 29 '19 at 15:49
I didn't run it myself. The error mentions it found an invalid object `{fontSize, textAlign, margin, color, fontFamily}` which looks like the style object for a text element. I noticed they were the keys used for `welcome`, so I looked at that element and saw the error. It's not technically a 'syntax' error; it's only because `styles.welcome` refers to an object (as opposed to a string) that it fails to run. Really it should be obvious in your IDE (like VSCode or Sublime) when syntax is wrong. For example, props like `style` are blue in VSCode, but plain text is white, which I notice now! – Flagship1442 Dec 29 '19 at 16:04
You're welcome! If you could upvote whichever comment helped you most I'd appreciate that for the credit :) – Flagship1442 Dec 29 '19 at 16:19
I think I can not because I have less then 15 reputation, or I did it but they don't share it publicly. – Ferda Ömeri Dec 29 '19 at 17:06
Ok ,no worries! ^^ – Flagship1442 Dec 30 '19 at 03:57

How to fix Unexpected token, expected ";" error in React

1 Answers1