React Custom Component Parameter Is Not Defined

Question

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>
    );
}

Answer 1

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>
}