I am rendering a simple React component using Typescript. The problem is that when I render it in the ReactDOM.redner method I get the following error:
This expression is not callable.
Type 'void' has no call signatures.
And I am not sure why, how can I fix it and render my component? Here is my code:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import SplitButton from '../../../src/ListButton/SplitButton'
const App = () => {
const items: any = ['Item1', 'Item2', 'Item3'];
return (
<div>
<SplitButton items={items} text="Enabled Button" />
<SplitButton disabled={true} items={items} text="Disabled Button" />
</div>
);
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
)
You can use install react package, then require. for example
npm install react-split-button --save
then you can use SplitButton component. import SplitButton from ....
var SplitButton = require('react-split-button')
var items = [
{
label: 'save as',
onClick: function(){
console.log('saved as')
},
items: [
{
label: 'PDF',
onClick: function(){
console.log('save as PDF')
}
},
{
label: 'Postscript'
}
]
},
{
label: 'export',
onClick: function(){
console.log('exported')
}
},
]
function save(){
console.log('SAVED!')
}
<SplitButton items={items} onClick={save}>
Save
</SplitButton>
function onMenuClick(event, itemProps){
console.log('You clicked ', itemProps.data.label)
}
<SplitButton items={items} onMenuClick={onMenuClick} onClick={save}>
Save
</SplitButton>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
It looks like you are using Kendo React. The SplitButton component is a named export from @progress/kendo-react-buttons, so you need to rework the import line as follows.
I also removed the any type annotation where items are declared, as it is not useful and actually in such case it is safer to let TypeScript guess that the items are a collection of strings.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SplitButton } from '@progress/kendo-react-buttons';
const App = () => {
const items = ['Item1', 'Item2', 'Item3'];
return (
<div>
<SplitButton items={items} text="Enabled Button" />
<SplitButton disabled={true} items={items} text="Disabled Button" />
</div>
);
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
)