I am struggling to create an HTML popup within a React component due to some errors
Here is the code snippet:
<div>
<button class="toggle">Button</button>
<div id="link-box">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
The error message states:
Type '{ children: string; class: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
Property 'class' does not exist on type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
I want to achieve this without using a React npm package specifically for dropdown menus. I don't mind resorting to basic HTML and later styling it with CSS if needed, but I require guidance on how to address the issues I'm encountering and proceed effectively.
Here is more of the file code:
export class Header extends React.Component<IHeaderProps, IHeaderState> {
public handleChange() {
console.log('handling');
}
public render() {
return (
<div>
<button class="toggle">Button</button>
<div id="link-box">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
);
}
}