0

I am trying to get the working in my SPFX application and I am sure I am not getting the class correct

I have tried my code in JS and ran it with npm install and it works fine, but when I try and do it in TS with spfx I get this error: 

import * as React from 'react';
import PropTypes from 'prop-types';



 export const Checkbox = ({ type = 'checkbox', checked = false, onChange, id }) => {

return <input id={id} type={type} checked={checked} onChange={onChange} />;
};

Checkbox.propTypes = {
type: PropTypes.string,
name: PropTypes.string.isRequired,
checked: PropTypes.bool,
onChange: PropTypes.func.isRequired,
};

and I call it with : 

return (
 <label style={{display: 'block'}} key={item.id}>
                            <Checkbox
                                style={{display: 'block'}}
                                checked={checked}
                                onChange={this.handleChange}
                                id={item.id}
                                statement={item.statement}
                            />
                            {item.statement}
                        </label>

My exact error is :error TS2604: JSX element type 'Checkbox' does not have any construct or call signatures.

Any ideas clever folks ?

Jason_Hough
  • 392
  • 5
  • 31

1 Answers1

1

Since you don't use a default export you need to either specify what component you are importing from the module:

import { Checkbox } from './Checkbox

Or you can use a default export and import it using the apropriate syntax 

const Checkbox = /* ... */
export default Checkbox;

import Checkbox from './Checkbox
Titian Cernicova-Dragomir
  • 230,986
  • 31
  • 415
  • 357
  • great but I now get this error : error TS2339: Property 'style' does not exist on type 'IntrinsicAttributes & { type?: string; checked?: boolean; onChange: any; id: any; }'. and thats on the item – Jason_Hough Jan 13 '19 at 15:44
  • @Jason_Hough ok, but that is a different issue. Your Checkbox component is not defined to take in a style or statement props .. – Titian Cernicova-Dragomir Jan 13 '19 at 15:48
  • ok thank you, but why does it work when I compile it all in JS ? and the style and the statement props doesn't error ? – Jason_Hough Jan 13 '19 at 15:53