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 <tr> 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="#%22%0D%0A%20className=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">Edit</a>
</div>
<div className="menu-item px-3">
<a href="#%22%20className=%22menu-link%20px-3%22%0D%0A%20data-kt-users-table-filter=%22delete_row" target="_blank" rel="noopener noreferrer">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="#%22%0D%0A%20className=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">Edit</a>
</div>
<div className="menu-item px-3">
<a href="#%22%20className=%22menu-link%20px-3%22%0D%0A%20data-kt-users-table-filter=%22delete_row" target="_blank" rel="noopener noreferrer">Delete</a>
</div>
</div>
</td>
</tr>)) : null
}
</tbody>
Replies (5)
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
Hi,
how to add it in Angular?
Solved;
KTMenu.createInstances();
Thanks Habi! I was scratching my head.. It's actually the same solution when I was dynamically building a custom dataTable and had to add KTUsersList.init() at the end of the script, but didn't occur to me to do this again for the menus.
how to add it in vue?? can you please explain?
