props property not seen in react component class

I am starting to learn react and am currently using Visual Studio 2017 to code a basic hello world web app. My index.html file is as follows:

<body>
 <div id="root"></div>
 <!-- scripts -->
 <script src="./dist/app-bundle.js"></script>
</body>

while my app.tsx file is as follows (app.tsx is transpiled to ./dist/app-bundle.js):

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

class Hello extends React.Component 
 render() 
 return (
 <h1>Welcome to dsdasd!!</h1>
 );
 


ReactDOM.render(<Hello />, document.getElementById('root'));

The above two files work fine. However, when I try to use the props property (shown below in the modified app.tsx) in the Hello class, the transpiler shows errors,

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

class Hello extends React.Component 
 render() 
 return (
 <h1>Welcome to this.props.message!!</h1>
 );
 


ReactDOM.render(<Hello message = "some message"/>, document.getElementById('root'));

ERROR: TS2339: Property 'message' does not exist on type '()'

How can I resolve this error? My understanding is that the props and state are always available in a react component. Any help is greatly appreciated.

asked Nov 13 '18 at 22:24

mettleap

1,080316

Have you tried removing the spaces before and after = that has come in the last line?

– Masious
Nov 14 '18 at 1:59

@Masious, I did that but the error remains ... do spaces matter?

– mettleap
Nov 14 '18 at 16:41

add a comment |

I am starting to learn react and am currently using Visual Studio 2017 to code a basic hello world web app. My index.html file is as follows:

<body>
 <div id="root"></div>
 <!-- scripts -->
 <script src="./dist/app-bundle.js"></script>
</body>

while my app.tsx file is as follows (app.tsx is transpiled to ./dist/app-bundle.js):

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

class Hello extends React.Component 
 render() 
 return (
 <h1>Welcome to dsdasd!!</h1>
 );
 


ReactDOM.render(<Hello />, document.getElementById('root'));

The above two files work fine. However, when I try to use the props property (shown below in the modified app.tsx) in the Hello class, the transpiler shows errors,

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

class Hello extends React.Component 
 render() 
 return (
 <h1>Welcome to this.props.message!!</h1>
 );
 


ReactDOM.render(<Hello message = "some message"/>, document.getElementById('root'));

ERROR: TS2339: Property 'message' does not exist on type '()'

How can I resolve this error? My understanding is that the props and state are always available in a react component. Any help is greatly appreciated.

asked Nov 13 '18 at 22:24

mettleap

1,080316

Have you tried removing the spaces before and after = that has come in the last line?

– Masious
Nov 14 '18 at 1:59

@Masious, I did that but the error remains ... do spaces matter?

– mettleap
Nov 14 '18 at 16:41

add a comment |

I am starting to learn react and am currently using Visual Studio 2017 to code a basic hello world web app. My index.html file is as follows:

<body>
 <div id="root"></div>
 <!-- scripts -->
 <script src="./dist/app-bundle.js"></script>
</body>

while my app.tsx file is as follows (app.tsx is transpiled to ./dist/app-bundle.js):

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

class Hello extends React.Component 
 render() 
 return (
 <h1>Welcome to dsdasd!!</h1>
 );
 


ReactDOM.render(<Hello />, document.getElementById('root'));

The above two files work fine. However, when I try to use the props property (shown below in the modified app.tsx) in the Hello class, the transpiler shows errors,

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

class Hello extends React.Component 
 render() 
 return (
 <h1>Welcome to this.props.message!!</h1>
 );
 


ReactDOM.render(<Hello message = "some message"/>, document.getElementById('root'));

ERROR: TS2339: Property 'message' does not exist on type '()'

How can I resolve this error? My understanding is that the props and state are always available in a react component. Any help is greatly appreciated.

asked Nov 13 '18 at 22:24

mettleap

1,080316

I am starting to learn react and am currently using Visual Studio 2017 to code a basic hello world web app. My index.html file is as follows:

<body>
 <div id="root"></div>
 <!-- scripts -->
 <script src="./dist/app-bundle.js"></script>
</body>

while my app.tsx file is as follows (app.tsx is transpiled to ./dist/app-bundle.js):

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

class Hello extends React.Component 
 render() 
 return (
 <h1>Welcome to dsdasd!!</h1>
 );
 


ReactDOM.render(<Hello />, document.getElementById('root'));

The above two files work fine. However, when I try to use the props property (shown below in the modified app.tsx) in the Hello class, the transpiler shows errors,

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

class Hello extends React.Component 
 render() 
 return (
 <h1>Welcome to this.props.message!!</h1>
 );
 


ReactDOM.render(<Hello message = "some message"/>, document.getElementById('root'));

ERROR: TS2339: Property 'message' does not exist on type '()'

How can I resolve this error? My understanding is that the props and state are always available in a react component. Any help is greatly appreciated.

javascript reactjs

asked Nov 13 '18 at 22:24

mettleap

1,080316

asked Nov 13 '18 at 22:24

mettleap

1,080316

asked Nov 13 '18 at 22:24

mettleap

1,080316

asked Nov 13 '18 at 22:24

mettleap

1,080316

asked Nov 13 '18 at 22:24

mettleap

1,080316

Have you tried removing the spaces before and after = that has come in the last line?

– Masious
Nov 14 '18 at 1:59

@Masious, I did that but the error remains ... do spaces matter?

– mettleap
Nov 14 '18 at 16:41

add a comment |

Have you tried removing the spaces before and after = that has come in the last line?

– Masious
Nov 14 '18 at 1:59

@Masious, I did that but the error remains ... do spaces matter?

– mettleap
Nov 14 '18 at 16:41

Have you tried removing the spaces before and after = that has come in the last line?

– Masious
Nov 14 '18 at 1:59

@Masious, I did that but the error remains ... do spaces matter?

– mettleap
Nov 14 '18 at 16:41

add a comment |

1 Answer
1

active

oldest

votes

You need to specify the props interface for a Typescript + React component:

interface Props 
 message: string;


class Hello extends React.Component<Props> 
 render() 
 return (
 <h1>Welcome to this.props.message</h1>
 );

answered Nov 13 '18 at 22:32

Danny Delott

3,43111537

Thank you for the answer. However, I still get the same error ... is there anything else that I might be missing?

– mettleap
Nov 13 '18 at 22:40

@estus, this does seem to be correct ... though I did recompile the project and the error still remains

– mettleap
Nov 14 '18 at 16:43

@mettleap The problem is that you use require. require should be used only when you want modules to be type-unsafe. Use import.

– estus
Nov 14 '18 at 17:03

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290435%2fprops-property-not-seen-in-react-component-class%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You need to specify the props interface for a Typescript + React component:

interface Props 
 message: string;


class Hello extends React.Component<Props> 
 render() 
 return (
 <h1>Welcome to this.props.message</h1>
 );

answered Nov 13 '18 at 22:32

Danny Delott

3,43111537

Thank you for the answer. However, I still get the same error ... is there anything else that I might be missing?

– mettleap
Nov 13 '18 at 22:40

@estus, this does seem to be correct ... though I did recompile the project and the error still remains

– mettleap
Nov 14 '18 at 16:43

@mettleap The problem is that you use require. require should be used only when you want modules to be type-unsafe. Use import.

– estus
Nov 14 '18 at 17:03

add a comment |

You need to specify the props interface for a Typescript + React component:

interface Props 
 message: string;


class Hello extends React.Component<Props> 
 render() 
 return (
 <h1>Welcome to this.props.message</h1>
 );

answered Nov 13 '18 at 22:32

Danny Delott

3,43111537

Thank you for the answer. However, I still get the same error ... is there anything else that I might be missing?

– mettleap
Nov 13 '18 at 22:40

@estus, this does seem to be correct ... though I did recompile the project and the error still remains

– mettleap
Nov 14 '18 at 16:43

@mettleap The problem is that you use require. require should be used only when you want modules to be type-unsafe. Use import.

– estus
Nov 14 '18 at 17:03

add a comment |

You need to specify the props interface for a Typescript + React component:

interface Props 
 message: string;


class Hello extends React.Component<Props> 
 render() 
 return (
 <h1>Welcome to this.props.message</h1>
 );

answered Nov 13 '18 at 22:32

Danny Delott

3,43111537

You need to specify the props interface for a Typescript + React component:

interface Props 
 message: string;


class Hello extends React.Component<Props> 
 render() 
 return (
 <h1>Welcome to this.props.message</h1>
 );

answered Nov 13 '18 at 22:32

Danny Delott

3,43111537

answered Nov 13 '18 at 22:32

Danny Delott

3,43111537

answered Nov 13 '18 at 22:32

Danny Delott

3,43111537

answered Nov 13 '18 at 22:32

Danny Delott

3,43111537

Thank you for the answer. However, I still get the same error ... is there anything else that I might be missing?

– mettleap
Nov 13 '18 at 22:40

@estus, this does seem to be correct ... though I did recompile the project and the error still remains

– mettleap
Nov 14 '18 at 16:43

@mettleap The problem is that you use require. require should be used only when you want modules to be type-unsafe. Use import.

– estus
Nov 14 '18 at 17:03

add a comment |

Thank you for the answer. However, I still get the same error ... is there anything else that I might be missing?

– mettleap
Nov 13 '18 at 22:40

@estus, this does seem to be correct ... though I did recompile the project and the error still remains

– mettleap
Nov 14 '18 at 16:43

@mettleap The problem is that you use require. require should be used only when you want modules to be type-unsafe. Use import.

– estus
Nov 14 '18 at 17:03

Thank you for the answer. However, I still get the same error ... is there anything else that I might be missing?

– mettleap
Nov 13 '18 at 22:40

@estus, this does seem to be correct ... though I did recompile the project and the error still remains

– mettleap
Nov 14 '18 at 16:43

@mettleap The problem is that you use require. require should be used only when you want modules to be type-unsafe. Use import.

– estus
Nov 14 '18 at 17:03

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj