How to use React component as template for Modal

[Bharath_Prakash]

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' },
      })

[mariappan (Mariappan Subramanian)]

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,

Use React component as a modal

Hey @Matheus_Nunes, Yes, you can use a react component as a template, but you cannot refer the component name as a template as the template would require a .html instead you can use the instance API like shown below in that case the template will be index.html since it’s a Single Page app, the component is rendered dynamically based on the location For eg App.js will be import React, { useState, useEffect } from "react"; import "./App.css"; import HelloUser from "./components/HelloUser"; i…

if the app has multiple modals,

React Example for Multiple location Apps & Modals

@arshath.h that is a good question, you can use the instance method in combination with the interface method to achieve this, here is an example HelloUser.js import React, { useState } from 'react' import PropTypes from 'prop-types' import reactLogo from '../assets/logo.svg'; import icon from '../assets/icon.svg' const HelloUser = ({client}) => { const [name, setName] = useState('') client.data.get('contact').then((data) => { setName(data.contact.name) }) const OpenModalOne = …

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!

[Bharath_Prakash]

Thanks for the update and help. It worked