radix radix - 2 months ago 45
React JSX Question

Typescript - passing multiple component attributes

I create a tsx react component like so:

export interface FABProps { onClick: Function; children?: any; otherProps?: any }
export interface FABState { onZoomButtonClick?: Function; }

export default class FAB extends React.Component<FABProps, FABState> {
static getInitialState() {
return {onZoomButtonClick: undefined};
}

render() {
let {onClick, children, ...otherProps} = this.props;

return (
<div className="right" style={{"padding" : "24px"}}>
<a className="btn-floating btn-large blue-grey darken-4"
onClick={onClick} {...otherProps}>
{children}
</a>
</div>
)
}
}


and using it like so:

<FAB id="layout-zoom-button" onClick={this.onZoomButtonClick}></FAB>;


Then i get this error in webpack:

(27,18): error TS2339: Property 'id' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FAB> & FABProps & { children?: ReactElement<any> |


How do i support passing multiple component attributes like the id property in typescript component?
I am using typescript 2 with ts-loader in webpack

Answer

You can fix it by adding the id property to the FABProps interface:

export interface FABProps {
    id: string;
    onClick: Function; 
    children?: any; 
    otherProps?: any
}