Search code examples
javascriptreactjsairtable

Why does error ';' expected occur in my app.js file when no semi-colon should be necessary?

I'm creating a Chrome extension with React which uses an Airtable database, copying code verbatim from a tutorial. In my app.js, I am following directions for adding a method called 'componentDidMount' underneath a constructor method, which calls the Airtable API to get the data values from it.

I'm receiving an error on the opening curly brace in the first line:

componentDidMount() {
  fetch('https://api.airtable.com/v0/app172rHs45CgT8UH/Favorites? api_key=YOUR_API_KEY')
  .then((resp) => resp.json())
  .then(data => {
     this.setState({ movies: data.records });
  }).catch(err => {

  });
}

The exact error is ';' expected. ts(1005)

I copied the code line for line from the tutorial and have set up my Airtable. I've also pasted my unique ID key, so I'm confused as to why this error occurs. I figure the problem is not really the semi-colon, because I've tried adding one and it still throws that error. I've included a screenshot of the code that comes immediately before and after the problem line, as well as the relevant section of the tutorial.

this is what the tutorial says to add to my app.js

error highlighted, with contextual code surrounding it

Here is the tutorial link, though of course I wouldn't expect anyone to actually read it. If it's helpful to see context, this part of the tutorial is just past the halfway point, under the heading: "Integrating React and Airtable"

https://upmostly.com/tutorials/create-simple-web-app-react-airtable/#introduction

I'd appreciate if anyone could tell me what may be going on. My understanding of this particular code is not very strong yet, as I'm just trying to complete the tutorial and understand each part of it.

If there is other information/code you need in order to know what is wrong, please let me know. Thank you so much!

Solution

  • Method componentDidMount() should go inside the class App (where the constructor is):

    class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
          movies: [],
        };
    }

    componentDidMount() {
        fetch('https://api.airtable.com/v0/appgOPm5an5ZzNvkk/favorites?api_key=YOUR_API_KEY')
        .then((resp) => resp.json())
        .then(data => {
           this.setState({ movies: data.records });
        }).catch(err => {
            // Error 🙁
        });
    }    
}

    This makes componentDidMount() a member method of class App. Classes are a way to logically group related methods and variables together into a single object.

    Just adding function fixes the syntax error, but does not remove the underlying problem: your program will not behave in the way expected! In this case, React will be looking for a method componentDidMount() in your App class. Since React can't find it, your code will not be executed; the default behavior will run instead.

    Some tips for how to recognize componentDidMount() should be wrapped inside a class:

    • componentDidMount() looks like a function, but there is no function keyword. Methods in classes are allowed to omit the function keyword.
    • componentDidMount() is indented. This is a convention for indicating the code is inside a code block.
    • The ... ellipses before and after componentDidMount() indicate code has been "hidden." If you're following that tutorial, this should make you wonder what code should come after componentDidMount(). The ... ellipses in the previous code snippet hint that something should be inserted there.
    • A basic understanding of JavaScript classes will also help a lot. Here are two good resources. A short reference and a detailed excerpt from a great book on JavaScript:

    BTW, componentDidMount() is part of the React API.