How to use React component as template for Modal

App Platform
, , ,
1

Usually the recommended file/template to access while trigger the showModal event is HTML file.
Can’t we use React component as a template like below?

const Modal = () => {
    return <div>Hello world</div>
}
 _client?.interface
      .trigger('showModal', {
        title: 'Sample Modal',
        template: <Modal />,
        data: { username: 'David', email: 'test@gmail.com' },
      })
3

Hi @Bharath_Prakash ,

Good day!

Yes, you cannot refer the component name as a template as the template would expect a .html file. But, you can use the instance API and achieve the same.

The below threads covers similar solutions you are looking for with a code snippet

In case of a single modal,

if the app has multiple modals,

Note: The react zip over the thread using platform version 2.0(deprecated), you would be required to change it to >=2.2. Please find the updated zip below.

react-modal.zip (346.3 KB)

Kindly take a look at it and let us know if you need anymore help/guidance on this.

Hope this helps!

2 Likes
4

Thanks for the update and help. It worked

5

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.