React and TypeScript, getting "Type expected" error

Question

I am converting a React component into Typescript (*.ts) from JS. It is giving the error below "Type expected". How would I fix this?

const SisenseDashboard = () => {

  const sisenseRef = React.useRef(null);

  return (
    <>
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        marginBottom={2}
      >
        <h2>In-App Reporting</h2>
      </Box>
      <Box
        ref={sisenseRef}
        id="sisense-container"
        className="sisense-demo"
      ></Box>
    </>
  );
};

Youssouf Oumar · Accepted Answer · 2023-01-29 11:14:23Z

23

Make sure your component file extension is .tsx and not .ts. This should resolve your issue. Addinonnaly, you could tell TypeScript that your function is a React Functional Component, for example, with the help of the FC type from React:

import {FC} from "react";

const SisenseDashboard : FC = () => {

  const sisenseRef = React.useRef(null);

  return (
    <>
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        marginBottom={2}
      >
        <h2>In-App Reporting</h2>
      </Box>
      <Box
        ref={sisenseRef}
        id="sisense-container"
        className="sisense-demo"
      ></Box>
    </>
  );
};

edited Jan 29, 2023 at 11:14

answered Mar 29, 2022 at 18:11

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React and TypeScript, getting "Type expected" error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related