Theme functions not working when render/mapping html elements

Hello everyone,

I am using React.js with Metronic 8 Html theme. The dropdown in TR that I added statically when the page loads is working (Top tr). But the dropdown inside the dynamically fetched of the map function is not triggered. (map loop)
How can I trigger these dynamically created dropdowns.

<tbody className="text-gray-600 fw-bold">
<tr>
<td>
<div
className="form-check form-check-sm form-check-custom form-check-solid">
<input className="form-check-input" type="checkbox" value={""}/>
</div>
</td>
<td>a</td>
<td>email</td>
<td>phone</td>
<td className="text-end">
<button
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
className={"btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1"}
>
<i className={"fa fa-edit"}/>
</button>
<div
className="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
data-kt-menu="true">
<div className="menu-item px-3">
<a href="#"
className="menu-link px-3">Edit</a>
</div>
<div className="menu-item px-3">
<a href="#" className="menu-link px-3"
data-kt-users-table-filter="delete_row">Delete</a>
</div>
</div>
</td>
</tr>
{
this.state.data ?
this.state.data.map((row)=>(
<tr key={row.id}>
<td>
<div
className="form-check form-check-sm form-check-custom form-check-solid">
<input className="form-check-input" type="checkbox" value={row.id}/>
</div>
</td>
<td>{row.name}</td>
<td>{row.email}</td>
<td>{row.phone}</td>
<td className="text-end">
<button
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
className={"btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1"}
>
<i className={"fa fa-edit"}/>
</button>
<div
className="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
data-kt-menu="true">
<div className="menu-item px-3">
<a href="#"
className="menu-link px-3">Edit</a>
</div>
<div className="menu-item px-3">
<a href="#" className="menu-link px-3"
data-kt-users-table-filter="delete_row">Delete</a>
</div>
</div>
</td>
</tr>)) : null
}
</tbody>

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

Solved;

KTMenu.createInstances();

Hi,

Try to create a separate small component with menu+submenu, and try to add next code in this component:

useEffect(() => {
MenuComponent.reinitialization() // import from _metronic/assets/ts/components
}, [])


Regards,
Keenthemes support

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(