Cannot able to use TabStripTab inside TabStrip component

[Sanjay]

Hi Team,

I am getting below error when using TabStripTab inside TabStrip component.

 

<div>
            <TabStrip
                selected={this.state.selected}
                onSelect={this.handleSelect}
                tabPosition={this.state.position}>
                <TabStripTab title="Tab 1">
                    This is test
                </TabStripTab>
                <TabStripTab title="Tab 2">
                    This is test2
                </TabStripTab>
            </TabStrip>
          </div>

JSX element type 'TabStripTab' is not a constructor function for JSX elements.
The types returned by 'render()' are incompatible between these types.
Type 'ReactNode' is not assignable to type 'false | Element'.
Type 'string' is not assignable to type 'false | Element'.

 

I checked in the documentation and googled it also but do not find any specific solution for this.

Please let me know if aI am missing any thing here.

 

 

 

Regards,

Sanjay

[Ina]

Hello Sanjay,

Thank you for your code. I have made Stackblitz example using TypeScript and your code:

https://stackblitz.com/edit/react-ts-dsa9yy 

It seems like all is working fine in it. Can you check if we have something missed out?

Also you can please send us the `package.json` file to see the versions of all packages.

Please let me know if you need more assistance.

Regards,
Ina
Progress Telerik

[Sanjay]

Hi Ina,

Please find attached package.json dependencies file.

Regards,

Sanjay

[Ina]

Hi Sanjay,

Please excuse me for the delayed response and thank you for sending the package.json file.

I am noticing that you are using `spxf` (microsoft sharepoint) with version 1.4 which is not compatible with your React version - 16, `spxf` is not supporting React 16+ versions.

Also is there a reason why you have  `@types/react @types/react-dom` as part of the `resolutions` ?

Please check the above and let me know if you need more assistance. 

Regards,
Ina
Progress Telerik