I'm new to react component, getting this error when using react-hooks, here is my code, can anyone help me with that? This is the detail of the error.
This could happen for one of the following reasons:
const newParams = "params"
// eslint-disable-next-line react-hooks/rules-of-hooks
const history = useHistory();
// eslint-disable-next-line react-hooks/rules-of-hooks
const location = useLocation();
export class FullscreenDialog extends React.Component{
constructor(props: any) {
super(props);
this.state = { dialogShow: false };
this.onDismissFullscreen = this.onDismissFullscreen.bind(this);
this.openDialogWithButton = this.openDialogWithButton.bind(this);
}
openDialogWithButton() {
updateSearch({history, location, newParams})
}
onDismissFullscreen() {
closeDialog({ history, location, key: 'key' })
}
render(){
const uniqueDialogId3 = 'notes';
return (
<>
<DialogRoute id={uniqueDialogId3}>
<Layer id="fullscreenDialog" >
<UitkFullscreenDialog ariaLabel="Demo" dialogShow={true} returnFocusOnClose={true}>
<UitkToolbar
header="Toolbar heading"
iconLabel="Close the dialog"
key="UitkToolbar"
type={ToolbarType.CLOSE}
/>
<UitkDialogContent key="UitkDialogContent-1">
<UitkParagraph key="UitkDialogContentParagraph" size={2}>
test
</UitkParagraph>
</UitkDialogContent>
</UitkFullscreenDialog>
</Layer>
</DialogRoute>
<UitkLink inline={true}>
<button onClick={this.openDialogWithButton}>Open Fullscreen Dialog</button>
</UitkLink>
</>
);
}
}
A general rule of thumb is anything starting with "use" is going to be a hook and will not work in a class based component. You can Wrap your component in withRouter from react router dom to access the history prop that way if you want to stick with a class based component, check that out here. Otherwise you can switch to a functional component which would look like this:
import React, {useState} from 'react';
const newParams = "params"
// eslint-disable-next-line react-hooks/rules-of-hooks
const history = useHistory();
// eslint-disable-next-line react-hooks/rules-of-hooks
const location = useLocation();
const FullscreenDialog = ({closeDialog, updateSearch}) => {
const [dialogShow, setDialogShow] = useState(false)
const openDialogWithButton = () => {
updateSearch({history, location, newParams})
}
const onDismissFullscreen = () => {
closeDialog({ history, location, key: 'key' })
}
const uniqueDialogId3 = 'notes';
return (
<>
<DialogRoute id={uniqueDialogId3}>
<Layer id="fullscreenDialog" >
<UitkFullscreenDialog ariaLabel="Demo" dialogShow={true} returnFocusOnClose={true}>
<UitkToolbar
header="Toolbar heading"
iconLabel="Close the dialog"
key="UitkToolbar"
type={ToolbarType.CLOSE}
/>
<UitkDialogContent key="UitkDialogContent-1">
<UitkParagraph key="UitkDialogContentParagraph" size={2}>
test
</UitkParagraph>
</UitkDialogContent>
</UitkFullscreenDialog>
</Layer>
</DialogRoute>
<UitkLink inline={true}>
<button onClick={openDialogWithButton}>Open Fullscreen Dialog</button>
</UitkLink>
</>
)
}