I am able to use a React class ponent (i.e. React.Component) as a Type but unable to use functional/stateless ponents. Here is an example:

import Footer from 'path/to/ponent/Footer';

interface ComponentProps {
    customFooter: (Footer)
}

class MyComponent extends React.Component<ComponentProps> {
    render() {
        return (
            <div>
                {this.props.customFooter}
            </div>
        );
    }
}

Footer.tsx

const Footer: React.StatelessComponent<{ children?: any }> = ({ children }) => (
    <footer>
        <div>
            {children}
        </div>
    </footer>
);

export default Footer;

The red underline is under the (Footer) and reads: Cannot find name 'Footer'.

I've discovered that if I use a React class ponent instead of a functional ponent, my issue goes away. Why is it that I cannot use a functional ponent and is there a way for me to do so?

I am able to use a React class ponent (i.e. React.Component) as a Type but unable to use functional/stateless ponents. Here is an example:

import Footer from 'path/to/ponent/Footer';

interface ComponentProps {
    customFooter: (Footer)
}

class MyComponent extends React.Component<ComponentProps> {
    render() {
        return (
            <div>
                {this.props.customFooter}
            </div>
        );
    }
}

Footer.tsx

const Footer: React.StatelessComponent<{ children?: any }> = ({ children }) => (
    <footer>
        <div>
            {children}
        </div>
    </footer>
);

export default Footer;

The red underline is under the (Footer) and reads: Cannot find name 'Footer'.

I've discovered that if I use a React class ponent instead of a functional ponent, my issue goes away. Why is it that I cannot use a functional ponent and is there a way for me to do so?

• javascript
• reactjs
• typescript

Share Improve this question Follow edited Jul 5, 2018 at 16:32 Erik Philips 54.7k1111 gold badges131131 silver badges156156 bronze badges asked Jul 5, 2018 at 15:20 noblerarenoblerare 12k2626 gold badges9191 silver badges167167 bronze badges 2

• you have a typo here: <footer}> – Kevin Amiranoff Commented Jul 5, 2018 at 15:27
• Thanks for the catch. That was a result of me removing unnecessary css class attribute from my question – noblerare Commented Jul 5, 2018 at 15:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Footer isn't a type it is only a variable, to get the type you could use typeof

const Footer: React.StatelessComponent<{ children?: any }> = ({ children }) => (
    <footer>
        <div>
            {children}
        </div>
    </footer>
);

interface ComponentProps {
    customFooter: typeof Footer    
}

then you can use it like this:

class MyComponent extends React.Component<ComponentProps> {
    render() {
        const {customFooter: CustomFooter} = this.props;
        return (
            <div>
                {<CustomFooter>footer children</CustomFooter>}
            </div>
        );
    }
}

const MainComponent = () => {
    return (<MyComponent customFooter={Footer}/>)
};

if you want to add an actual jsx element as value like this:

const MainComponent = () => {
    return (<MyComponent customFooter={<Footer>footer children</Footer>}/>)
};

then you need to set the type of customFooter to something like React.ReactNode:

interface ComponentProps {
    customFooter: React.ReactNode
}