0

I'm currently using the Typescript version of reactjs and keep getting the error "message is not defined".

This error is coming from line 5.

import './App.css'
import * as React from "react";

const MyComponent: React.FC = ({ message: string }) => {
    return <h1>{message}</h1>
}

export default function App() {
  return (
      <div className="app">
        <MyComponent message="hello world"></MyComponent>
      </div>
    );
}
Adriaan
  • 17,741
  • 7
  • 42
  • 75
Kuno
  • 15
  • 3
  • 2
    Your syntax is wrong: `({ message: string })` doesn't do what you think it does. You probably want `({ message }: { message: string })` – Jared Smith Apr 28 '22 at 13:38

1 Answers1

2

You may have to typecheck your component so it knows to expect message as a parameter! Please see the following post for some more context: https://fettblog.eu/typescript-react/components/. Here is a quick solution that might help!

import './App.css'
import * as React from "react";

type MyComponentProps = {
  message: string
}

const MyComponent: React.FC = ({ message }: MyComponentProps) => {
    return <h1>{message}</h1>
}
Amit Maraj
  • 344
  • 1
  • 5