connectToBirst() only works with stateless components?

[JesseSingleton]

Hey Steve, hope things are well.

I'm currently trying to port the Bodymap into a reusesable birst widget, and I'm having an issue when I try and use connectToBirst(createQuery(parameters))(BodyMapComponent).

If BodyMapComponent is a stateless component it works fine but I'm getting to a point where I think need to be able to deal with state and when I make it into a class I get the following error:

ERROR in [at-loader] ./src/BodyMap/createConnectedBodyMap.tsx:38:60
        TS2345: Argument of type 'typeof BodyMapContainer' is not assignable to parameter of type 'ComponentType<{ bodyParts: IBodyPart[]; } & { applyDrillDown(drillDown: IDrillDown): any; }>'.
      Type 'typeof BodyMapContainer' is not assignable to type 'StatelessComponent<{ bodyParts: IBodyPart[]; } & { applyDrillDown(drillDown: IDrillDown): any; }>'.
        Type 'typeof BodyMapContainer' provides no match for the signature '(props: { bodyParts: IBodyPart[]; } & { applyDrillDown(drillDown: IDrillDown): any; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.
webpack: Failed to compile.

A quick get around is to replace BodyMapComponent with a stateless component wrapping BodyMapComponent and this passes down the props, but obviously that feels a little wrong and I think this might be causing some issues with trying to pass through other HTMLparameters.

Here's my BodyMapContainer component just in case I'm doing anything obvious:

import * as React from 'react';
import { IBodyPart } from '../IBodyPart';
import { BodyPart } from './BodyPart';
import { BodyMap } from './BodyMap';
import { Thumbnail } from './Thumbnail';
const css = require('../bodyMap.less');

export interface IBodyMapContainerProps {
	bodyParts: IBodyPart[];
	imageUrls: string;
};

interface IBodyMapContainerState {
	backgroundImage: string;
}

export class BodyMapContainer extends React.Component<IBodyMapContainerProps, IBodyMapContainerState> {
	constructor(props: IBodyMapContainerProps) {
		super(props);
	}
	
	updateImage = (backgroundImage: string) => {
	//Does something
	};

	render() {
		return (
		<div className='image-map-container'>
		<div className='thumbnails'>
			<Thumbnail onChange = { this.updateImage } backgroundImage = './Images/body-map-front.png'/>
			<Thumbnail onChange = { this.updateImage } backgroundImage = './Images/body-map-back.png'/>
		</div>
			<svg className='image-map-svg' >
				<BodyMap
					{...this.props}
				>
				</BodyMap>
			</svg>
		</div>
		)
	}
}

export default BodyMapContainer;

[stevegreatrex]

Hey Jesse, My initial lazy-at-the-station suggestion is to try updating the type definition to include Component<Whatever> and see if that works for you. If not, give me a shout

…

On 23 Jan 2018 20:20, "Jesse George Singleton" ***@***.***> wrote: Hey Steve, hope things are well. I'm currently trying to port the Bodymap into a reusesable birst widget, and I'm having an issue when I try and use connectToBirst(createQuery( parameters))(BodyMapComponent). If BodyMapComponent is a stateless component it works fine but I'm getting to a point where I think need to be able to deal with state and when I make it into a class I get the following error: ERROR in [at-loader] ./src/BodyMap/createConnectedBodyMap.tsx:38:60 TS2345: Argument of type 'typeof BodyMapContainer' is not assignable to parameter of type 'ComponentType<{ bodyParts: IBodyPart[]; } & { applyDrillDown(drillDown: IDrillDown): any; }>'. Type 'typeof BodyMapContainer' is not assignable to type 'StatelessComponent<{ bodyParts: IBodyPart[]; } & { applyDrillDown(drillDown: IDrillDown): any; }>'. Type 'typeof BodyMapContainer' provides no match for the signature '(props: { bodyParts: IBodyPart[]; } & { applyDrillDown(drillDown: IDrillDown): any; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'. webpack: Failed to compile. A quick get around is to replace BodyMapComponent with a stateless component wrapping BodyMapComponent and this passes down the props, but obviously that feels a little wrong and I think this might be causing some issues with trying to pass through other HTMLparameters. Here's my BodyMapContainer component just in case I'm doing anything obvious: import * as React from 'react'; import { IBodyPart } from '../IBodyPart'; import { BodyPart } from './BodyPart'; import { BodyMap } from './BodyMap'; import { Thumbnail } from './Thumbnail'; const css = require('../bodyMap.less'); export interface IBodyMapContainerProps { bodyParts: IBodyPart[]; imageUrls: string; }; interface IBodyMapContainerState { backgroundImage: string; } export class BodyMapContainer extends React.Component<IBodyMapContainerProps, IBodyMapContainerState> { constructor(props: IBodyMapContainerProps) { super(props); } updateImage = (backgroundImage: string) => { //Does something }; render() { return ( <div className='image-map-container'> <div className='thumbnails'> <Thumbnail onChange = { this.updateImage } backgroundImage = './Images/body-map-front.png'/> <Thumbnail onChange = { this.updateImage } backgroundImage = './Images/body-map-back.png'/> </div> <svg className='image-map-svg' > <BodyMap {...this.props} > </BodyMap> </svg> </div> ) } } export default BodyMapContainer; — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#7>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA0J0N5TemaetidWZPEVcINKj3gWx-qNks5tNj8ngaJpZM4RqQb3> .