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

Your syntax is wrong: ({ message: string }) doesn't do what you think it does. You probably want ({ message }: { message: string }) — Jared Smith
– Jared Smith, Commented Apr 28, 2022 at 13:38

Amit Maraj · Accepted Answer · 2022-04-28 13:38:36Z

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

answered Apr 28, 2022 at 13:38

Amit Maraj

3741 silver badge5 bronze badges

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

2 Comments

Kuno Over a year ago

Ah, thank you! For some odd reason I googled this but couldn't find the answer for this, it works now.

Amit Maraj Over a year ago

Yay, sounds good. I'm glad it works! Best of luck with your app.

Collectives™ on Stack Overflow

React Custom Component Parameter Is Not Defined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related