Why does this render say that it requires a semi colon?-CodePudding

I'm new to react and I'm trying to figure out why this render statement says that is requires a semicolon.

import React, { useState, useEffect } from 'react';
import './App.css';
import firebase from 'firebase/compat/app';
import 'firebase/database';
import 'firebase/firestore';

function test() {

    render() {
        return (
            <div>
                <p>Display</p>
            </div>
        );
    }
  } 
  

  export default test;

CodePudding user response：

test is a function component, you don't need a render method for a function component. Just remove the render method and the code should work.

Read more about function components here.

CodePudding user response：

Most ECMAScript statements and declarations must be terminated with a semicolon. Such semicolons may always appear explicitly in the source text. For convenience, however, such semicolons may be omitted from the source text in certain situations. These situations are described by saying that semicolons are automatically inserted into the source code token stream in those situations.

In your case, ES6 is being used through babel. It's a transpiler and it may add the missed semicolons in the process of transpiling the source text to native JS.