Hi I'm having difficulty in implementing data-attribute in autocomplete suggestion items.
The problem is i need more info in of the selected suggestion, not just the ID.
The code below works but it doesn't solve the problem because the data attributes were set in the li's children element.
How do i add custom data-attribute to HTMLLIElement? TIA
const itemRender = (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => {
const itemChildren = (
<div className="autocomplete-suggestion"
data-employeeid={`${itemProps.dataItem.memberInfo.employeeID}`}
onClick={ (e) => e.preventDefault()}
>
{li.props.children}
</div>
);
return cloneElement(li, li.props , itemChildren);
};
1 Answer, 1 is accepted
0
Hello Rex,
You can add custom attributes by modifying the props passed to the cloneElement function:
let newProps = { ...li.props, 'data-employeeid': itemProps.index };
return React.cloneElement(li, newProps, itemChildren);Here is an example with the above approach:
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.