Weird result when using state variables in dialog templates
Hi! I tried to use state in dialog's header, content and footer templates. Header and Footer were showing state value but content did not. Is it possible that content template is somehow broken? If not, what am I doing wrong? Here is my code:
import React, { useState, useRef } from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
export function Dashboard() {
const [state, setState] = useState({
dialogOpen: false,
});
const [count, setCount] = useState(0);
const handleClick = () => {
setState({ dialogOpen: true })
setCount(count + 1);
};
const handleClose = () => {
setState({ dialogOpen: false });
};
const headerTemplate = () => {
return <div>Test { count }div>
}
const contentTemplate = () => {
return <div>This dialog has been opened {count} timesdiv>
}
const footerTemplate = () => {
return <div>Footer { count }div>
}
return (
<div>
<DialogComponent
width='350px'
visible={state.dialogOpen}
header={headerTemplate}
content={contentTemplate}
footerTemplate={footerTemplate}
close={handleClose}
overlayClick={() => handleClose}
/>
<ButtonComponent onClick={handleClick}>
Open
ButtonComponent>
div>
)
}
As a side note.... if I looked at components in React dev tools there were multiple headers and footers and only one content. Which is kind of weird. Should there be so many header/footer components?
SIGN IN To post a reply.
3 Replies
SIGN IN To post a reply.
