CODEWITHSUNDEEP
javascriptajaxreactjsreact-native
Zeed Tanue
Zeed Tanue

Reputation: 121

React Native constructor: Unexpected token, expected ";"

I am very new in react native, I am facing some issue regarding syntax error, I am giving my app.js here 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MainService from './App/mainservice';

export default function App() {
  state ={
   loaded:false
  }
  constructor() {
   super();
   MainService.load(v =>this.setState({loaded:true}));
  }

  return (
    <View style={styles.container}>
      {this.state.loaded ? <Text>Open up App.js to start working on your app!</Text> : <Text> Loading..</Text>}
    </View>
  );
}

The error occurring at constructor() { this line, saying constructor is missing an error,

TransformError SyntaxError: C:\Users\Zeed Tanue\Desktop\Skills\vue-native\React\deleteLater\App.js: Unexpected token, expected ";" (9:16)

   7 |     loaded:false
   8 |   }

>  9 |   constructor() {
     |                 ^
  10 |     super();
  11 |     MainService.load(v =>this.setState({loaded:true}));
  12 |   }

I have made some research and haven't found any solution, this is the correct way of doing this in every solution and hence I am having the error. Could you please help me out with the issue and why is this happening?

Upvotes: 1

Views: 3702

Answers (2)

Slbox
Slbox

Reputation: 13118

Don't try this - try the accepted answer instead

Try this instead. See the code comments for explanations.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MainService from './App/mainservice';

export default function App() {
  constructor(props) { // Must accept props arg
   super(props); // Must pass props to super()
   this.state = { // If you define a constructor, any initial state you have should be defined within the constructor
     loaded: false
   }
   MainService.load(v =>this.setState({loaded:true}));
  }

return (
 <View style={styles.container}>
  {this.state.loaded ? <Text>Open up App.js to start working on your app!</Text> : <Text> Loading..</Text>}
</View>

Upvotes: 1

Drew Reese
Drew Reese

Reputation: 202846

React functions (functional components) have no constructor, nor this, they are instanceless. You can use the useState and useEffect hooks to provide state and a sense of component lifecycle functions.

import React, { useEffect, useState} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MainService from './App/mainservice';

export default function App() {
  const [loaded, setLoaded] = useState(false); // provide initial false state

  useEffect(() => {
    MainService.load(v => setLoaded(true));
  }, []); // empty dependency array analogous to componentDidMount

  return (
    <View style={styles.container}>
      {loaded ? (
        <Text>Open up App.js to start working on your app!</Text>
      ) : (
        <Text>Loading...</Text>}
      )
    </View>
  );
}

If you want to make this a class-based component then here are the issues you have. You can't call setState in the constructor so you'll need to call MainService in a lifecycle function, like componentDidMount. Also, the rendered JSX needs to be returned in the render lifecycle function.

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MainService from './App/mainservice';

export default class App extends Component {
  constructor() {
    super();
    this.state ={
      loaded:false
    }
  }

  componentDidMount() {
    MainService.load(v =>this.setState({loaded:true}));
  }

  render() {
    const { loaded } = this.state;
    return (
      <View style={styles.container}>
        {loaded ? (
          <Text>Open up App.js to start working on your app!</Text>
        ) : (
          <Text>Loading...</Text>}
        )
      </View>
    );
  }
}

Upvotes: 3

Related Questions