PrimeReact menu not compiling

Question

I'm trying to have a PrimeReact popup menu working following the documention.

I created a new project with tsx.

I tried

import 'primereact/resources/themes/saga-blue/theme.css'
import 'primereact/resources/primereact.min.css'
import 'primeicons/primeicons.css'
import {Menu} from "primereact/menu";
import {useRef} from "react";

const Header = () => {
    let menu = useRef(null);
    let items = [
        {icon: 'pi pi-cog', label: 'Configuration'},
        {icon: 'pi pi-info-circle', label: 'About'}
    ];
    return(
        <div className="header">
            <div><i className="pi pi-chevron-left"></i></div>
            <div>Test</div>
            <Menu model={items} popup ref={menu} id="popup_menu" />
            <div><i className="pi pi-ellipsis-v" onClick={(event) => menu.current.toggle(event)} aria-controls="popup_menu" aria-haspopup/></div>
        </div>
    );
}

export default Header

When compiling it gives me

Object is possibly 'null'.  TS2531

    19 |             <div>Test</div>
    20 |             <Menu model={items} popup ref={menu} id="popup_menu" />
  > 21 |             <div><i className="pi pi-ellipsis-v" onClick={(event) => menu.current.toggle(event)} aria-controls="popup_menu" aria-haspopup/></div>
       |                                                                      ^
    22 |         </div>
    23 |     );
    24 | }

What am I missing ?

I also tried creating a new project with jsx instead of tsx.

And it is working. So the problem is coming from tsx.

But why ? And how to solve it ?

I eventually found a solution

use

let menu = useRef`<Menu>`(null);

and

onClick={(event) => menu?.current?.toggle(event)}

can you add a ! at the end of the onClick function and see if it works? something like: `(event) => menu.current.toggle(event)!` — Tarun Kolla, Oct 11 '21 at 18:20
So basically it is trying to warn you saying there is a chance that the value could be `null`. Adding `!` should have told it that you are confident that the value will not be `null`. Try optional chaning `(event) => menu?.current?.toggle(event)`. If it still errors out I'm gonna double thing my carrier choices — Tarun Kolla, Oct 11 '21 at 18:38
I'm sorry to tell you ... it is also not working :-) But the problem is elsewhere. See my edited question. Thanks anyway. — tweetysat, Oct 12 '21 at 18:20
With menu?.current?.toggle(event), it now tells me Property 'toggle' does not exist on type 'never' — tweetysat, Oct 12 '21 at 18:28
I eventually found a solution. Don't know if it is THE solution or if it is only a trick. — tweetysat, Oct 12 '21 at 18:34

score 0 · Answer 1 · answered Apr 06 '22 at 10:17

I was having this issue today. The solution from OP confused me a lot. I copy pasted exactly what OP posted which is:

let menu = useRef`<Menu>`(null);

and that does not work. I'm not entirely sure if this worked for OP or what, but the solution for me is to use the following:

let menu = useRef<Menu>(null);

My menu component looks like this:

<Menu model={menuItems} popup ref={menu} aria-controls="popup_menu" aria-haspopup />

And my button to show the menu looks like this:

<Button icon="pi pi-bars" onClick={(event) => menu.current?.toggle(event)}/>

If anyone is copy-pasting this to test, i used the following for menuItems:

const menuItems = [
    {label: 'New', icon: 'pi pi-fw pi-plus'},
    {label: 'Delete', icon: 'pi pi-fw pi-trash'}
];

PrimeReact menu not compiling

1 Answers1