Build HTML popup with packages

Question

I have to build an html popup inside a react component but I get errors

from this code

<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>

error:

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'd like to accomplish this without a react npm package for dropdown menus. If I have to do some really rudimentary html with later css styling that okay. But I need some insight into what are the issues I'm facing how to best proceed.

More of 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>
    );
    }
}

You can't use `class` inside jsx, you need to call it `className`. — solarc, Aug 09 '19 at 00:30
@solarc I am vary aware about being unable to `class` inside jsx. Nothing you said approaches an answer. — Blue, Aug 09 '19 at 01:48

score 0 · Answer 1 · answered Aug 09 '19 at 00:08

0

About the error you are facing, if you could provide the typescript code of the component then we could look for a solution.

By the way since you are using React you could set a Modal to popup when certain buttons are clicked.

These are some Modal examples .

And this is a Modal tutorial that doesn't require to install any npm package, which may be what you are looking for.

answered Aug 09 '19 at 00:08

Pipimi

133
8

I'm not looking for the modal solution because that pops up in the center of the screen as I understand. I really want the drop down functionality. – Blue Aug 09 '19 at 00:14

Build HTML popup with packages

1 Answers1