I'm trying to build a basic chat room app, and I'm having trouble understanding why my app ponent doesn't render. I expect this is probably a really basic issue, but I'm new to coding (and Stack Overflow) in general so it's escaping me.

I've got the ponent set up similarly to one I already built that worked fine, but when I try to run, I get an error saying that a semicolon is expected in place of the curly brace right after I call the render method.

I found another answer saying that this usually indicates invalid JSX syntax within the ponent, but I've rearranged it every way I can think of. I tried just putting the semicolon there as a Hail Mary, but that predictably just caused more errors.

import React, {Component} from 'react';
import RoomList from './ponents/RoomList'
import MessageList from './ponents/MessageList'
import './App.css';
import * as firebase from 'firebase';

// <script src=".1.1/firebase-app.js"></script>

  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyA9oZW7yL_BgNtkODEkOftd8SztNDm6aLw",
    authDomain: "bloc-chat-e5e85.firebaseapp",
    databaseURL: "",
    projectId: "bloc-chat-e5e85",
    storageBucket: "bloc-chat-e5e85.appspot",
    messagingSenderId: "716557708964",
    appId: "1:716557708964:web:69e9e607313399b0"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);



  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        activeRoom: null
      }

    render() {
      return (
        <div className="App">
         <header className="App-header">
         <RoomList firebase={firebase}>
         </RoomList>
         </header>
       </div>
  );
 }
}

export default App;

This should display a list of available chat rooms and an input field for adding more, but the error message is as follows:

  Line 32:  Parsing error: Unexpected token, expected ";"

  30 |       }
  31 | 
> 32 |     render() {
     |              ^

I'm trying to build a basic chat room app, and I'm having trouble understanding why my app ponent doesn't render. I expect this is probably a really basic issue, but I'm new to coding (and Stack Overflow) in general so it's escaping me.

I've got the ponent set up similarly to one I already built that worked fine, but when I try to run, I get an error saying that a semicolon is expected in place of the curly brace right after I call the render method.

I found another answer saying that this usually indicates invalid JSX syntax within the ponent, but I've rearranged it every way I can think of. I tried just putting the semicolon there as a Hail Mary, but that predictably just caused more errors.

import React, {Component} from 'react';
import RoomList from './ponents/RoomList'
import MessageList from './ponents/MessageList'
import './App.css';
import * as firebase from 'firebase';

// <script src="https://www.gstatic./firebasejs/6.1.1/firebase-app.js"></script>

  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyA9oZW7yL_BgNtkODEkOftd8SztNDm6aLw",
    authDomain: "bloc-chat-e5e85.firebaseapp.",
    databaseURL: "https://bloc-chat-e5e85.firebaseio.",
    projectId: "bloc-chat-e5e85",
    storageBucket: "bloc-chat-e5e85.appspot.",
    messagingSenderId: "716557708964",
    appId: "1:716557708964:web:69e9e607313399b0"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);



  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        activeRoom: null
      }

    render() {
      return (
        <div className="App">
         <header className="App-header">
         <RoomList firebase={firebase}>
         </RoomList>
         </header>
       </div>
  );
 }
}

export default App;

This should display a list of available chat rooms and an input field for adding more, but the error message is as follows:

  Line 32:  Parsing error: Unexpected token, expected ";"

  30 |       }
  31 | 
> 32 |     render() {
     |              ^

• javascript
• reactjs
• firebase

2 Answers 2

You forgot the } of constructor

  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        activeRoom: null
      }
    }

    render() {
      return (
        <div className="App">
         <header className="App-header">
         <RoomList firebase={firebase}>
         </RoomList>
         </header>
       </div>
  );
 }
}

export default App;

I think you're missing a closing curly brace to close the constructor.