Returning Code from a TypeScript Module in React-CodePudding

I am trying to create a simple page which two main parts: Menu and Guide. In my App,tsx, I have:

import React from 'react';
import Guide from './Guide/Guide';
import './App.css';

function App() {
  return (
    <Guide />
  );
}

export default App;

This is fine.

But, in the ./Guide/Guide.tsx, I have:

import React, { Component } from "react";
import Menu from "./Menu/Menu";

export default class Guide extends Component {
    constructor(props: {}) {
        super(props);
    }

    return (
        <Menu />
    );
}

Menu.tsx:

import React, { Component } from "react";

export default class Menu extends Component {
    return (
        <h1>Test</h1>
    );
};

However I'm getting the error 'return', which lacks return-type annotation, implicitly has an 'any' return type..

What's going on here?

You can probably tell I'm very new to React and TypeScript!

CodePudding user response：

In class component (such as your Guide and Menu components), you render some HTML code inside the render function. Insinde functional components (such as your App component), you render some HTML code inside the return function. Here you are mixing those 2 different syntax, that is why you are getting this error.

In order to fix this, simply replace your return function in the Menu and Guide components by the render function