I have written a small stateful React component. When this component loads, in componentDidMount
method I am making use of Kendo UI to show the content of the component in a popup window.
Here's my code:
export class ErrorDialog extends React.Component {
constructor(props, context) {
super(props, context);
this.errorPopupWindow = null;
window.addEventListener('resize', this.resizeComponent);
this.handleWindowKeyDown = this.handleWindowKeyDown.bind(this);
this.handleButtonCloseWindowOnClick = this.handleButtonCloseWindowOnClick.bind(this);
this.handleButtonShowDetailsOnClick = this.handleButtonShowDetailsOnClick.bind(this);
$('#ErrorInformationForm-CloseWindow').focus();
}
render() {
const errorInformation = this.props.errorInformation;
const baseException = errorInformation.baseException;
const showExceptionMessage = (typeof baseException !== 'undefined' && typeof baseException === 'object' && baseException !== null
&& typeof baseException.message !== 'undefined' && typeof baseException.message === 'string' && baseException.message !== null
&& baseException.message !== '') ? true : false;
const baseExceptionMessage = showExceptionMessage ? baseException.message : '';
const exceptionMessageCss = showExceptionMessage ? 'k-textbox ce-width-100-pct ce-margin-top-5' : 'ce-invisible';
return(
<div id="Error-Dialog-Popup" onKeyDown={this.handleWindowKeyDown}>
<div className="ce-window-body">
{errorInformation.message}
<code>
<textarea readOnly={true} className={exceptionMessageCss} rows="3" defaultValue={baseExceptionMessage} />
</code>
</div>
</div>
);
}
componentDidMount() {
const errorInformation = this.props.errorInformation;
const modalWindowTitle = '<span class="ce-width-100-pct ce-app-color-red"><i class="fa ce-fs-1-2-5x fa-times-circle"></i> ' + errorInformation.heading + '</span>';
$('#Error-Dialog-Popup').kendoWindow({
actions: [],
width: 500,
height: 130,
visible: true,
modal: true,
title: modalWindowTitle,
resizable: false
});
this.resizeComponent();
}
resizeComponent() {
}
closeWindowIfPossible(evt) {
}
handleWindowKeyDown(evt) {
}
handleButtonShowDetailsOnClick(evt) {
}
handleButtonCloseWindowOnClick(evt) {
}
}
Given that this component doesn't need to maintain any state, I am trying to convert this component into a stateless functional component.
The place where I am struggling is how to implement componentDidMount functionality? Here's the code I have written so far:
export const ErrorDialog = (props, context) => {
const errorInformation = props.errorInformation;
const baseException = errorInformation.baseException;
const showExceptionMessage = (typeof baseException !== 'undefined' && typeof baseException === 'object' && baseException !== null
&& typeof baseException.message !== 'undefined' && typeof baseException.message === 'string' && baseException.message !== null
&& baseException.message !== '') ? true : false;
const baseExceptionMessage = showExceptionMessage ? baseException.message : '';
const exceptionMessageCss = showExceptionMessage ? 'k-textbox ce-width-100-pct ce-margin-top-5' : 'ce-invisible';
const resizeComponent = () => {
}
const closeWindowIfPossible = (evt) => {
}
const handleWindowKeyDown = (evt) => {
}
const handleButtonShowDetailsOnClick = (evt) => {
}
const handleButtonCloseWindowOnClick = (evt) => {
}
const handleComponentOnLoad = (evt) => {
console.log('comes in onLoad');
const errorInformation = props.errorInformation;
const modalWindowTitle = '<span class="ce-width-100-pct ce-app-color-red"><i class="fa ce-fs-1-2-5x fa-times-circle"></i> ' + errorInformation.heading + '</span>';
$('#Error-Dialog-Popup').kendoWindow({
actions: [],
width: 500,
height: 130,
visible: true,
modal: true,
title: modalWindowTitle,
resizable: false
});
resizeComponent();
}
return(
<div id="Error-Dialog-Popup" onLoad={handleComponentOnLoad} onKeyDown={handleWindowKeyDown}>
<div className="ce-window-body">
{errorInformation.message}
<code>
<textarea readOnly={true} className={exceptionMessageCss} rows="3" defaultValue={baseExceptionMessage} />
</code>
</div>
</div>
);
}
At first, I thought I could implement componentDidMount
kind of functionality in onLoad
event handler of the div but when I tried doing it I noticed that the event is not fired at all (I then read the documentation and found out that I can't really use this event :)).
So my questions are:
- Is there a way to implement
componentDidMount
kind of functionality in stateless functional components? Essentially what I need to do is do something with the component when it is loaded in DOM. - Is what I am trying to do is a valid scenario in case of a stateless functional component or should I just stick with standard component?