I'm trying to show modal onClick from div, but it keeps returning
Uncaught (in promise) Error: Nested m.redraw.sync() call
Component code:
import Component from 'flarum/common/Component';
import WelcomeHero from 'flarum/forum/components/WelcomeHero';
import NewsModal from "./NewsModal";
import Button from "flarum/common/components/Button";
export default class NewsPage extends Component {
view() {
return (
<div className="NewsPage">
{this.hero()}
<div className="container">
{app.store.all('news').map((e) => {
return (
<div className="news" onClick={app.modal.show(NewsModal)}>
Test
</div>
);
})}
</div>
</div>
);
}
hero() {
return WelcomeHero.component();
}
}
Modal code:
import Modal from 'flarum/components/Modal';
export default class NewsModal extends Modal {
static isDismissible = false;
className() {
return 'custom-modal-class';
}
title() {
return (
<p>Custom Modal</p>
);
}
content() {
return (
<p>Hello World!</p>
);
}
}
I tried looking for the answer on the internet and on Flarum forum but I didn't find anything helpful :/