React.JS prop is not found

Question

Here is the piece of my index.ts code (where I call the component to display)

        <GlobalContext.Provider value={this.globalContext as IGlobalContext}>
            <Container maxWidth="lg">
                <Switch>
                    <Route path="" component={HelloWorld} elements={this.getResults()}/>
                </Switch>
            </Container>
        </GlobalContext.Provider>

Here is the piece of the helloWorld.ts file (the beggining)

import React from 'react';

export default class HelloWorld extends React.Component {

    public render(): JSX.Element {
        let elements = this.props.elements; // I Want to get the elements props passed throuth my router component
        ....

Why can't I get the this.props.elements in the helloWorld.ts file? How can I do it?

I Have the error: Property 'elements' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'. TS2339

Answer 1

Use constructor and also lose the ' this ' in render method.

   constructor(props)
{
    super(props);
}

public render(): JSX.Element {
 let elements = props.elements;
            ....

Just use props.elements instead of this.props.elements