How to use component which contains actions? Getting error “Type '{}' is not assignable to type 'IntrinsicAttributes”

Question

I'm trying to get my component to have some prop actions to do stuff with it (such as user login through a popup eventually):

import { Component } from 'react';
import * as React from 'react';
import { connect } from 'react-redux';


class Props
{
    dostuff()
    {

    }
}

export class Test extends Component<Props, {}> {
    public render() {
        return (<div>lol</div>);
    }
}

In my layouts.tsx I try to do this:

import * as React from 'react';
import { NavMenu } from './NavMenu';
import { Test } from '../test/test'
import { Component } from 'react';

export class Layout extends React.Component<{}, {}> {
    public render() {
        return <div className='container-fluid'>
            <div className='row'>
                <div className='col-sm-3'>
                    <NavMenu />
                </div>
                <div className='col-sm-9'>
                    <Test />
                    {this.props.children}
                </div>
            </div>
        </div>;
    }
}

However looks like react doesn't like my action in the props..

ERROR in [at-loader] ./ClientApp/components/Layout.tsx:16:21 TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Read...'. Type '{}' is not assignable to type 'Readonly'. Property 'dostuff' is missing in type '{}'.

My props are usually just strings or booleans which I nclude without issue, how do I make it work with functions? If this isn't possible can I put it elsewhere in the component?

Answer 1

The problem is that React very much likes your action in the props, but you're not providing one at <Test/> . If you add a method dostuff to Layout and use <Test dostuff={this.dostuff}/> , it should work. Also, you probably want to declare an interface Props , instead of a class, as you just want to declare the types there.