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">
Edit
</div>
<div className="menu-item px-3">
Delete
</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">
Edit
</div>
<div className="menu-item px-3">
Delete
</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
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.
