How to open a popup from ListItem in react code?


I am new to react I use f7 v3 and I want to open a popup from a listItem

I have 2 issues,

  1. call function from listitem
  2. open a popup from code

or just open it from listItem if possible

In React, I can open a popup from a button using this -> popupOpen="#popup" and I dont know why its not directly supported in listItem,

I though to call a function and open it inside the function
In order to call the function, I tried both click=‘openPopupSettings()’ and click={this.openPopupSettings()}

when I use click={this.openPopupSettings()} initially call function and logs trying
here is the html

      <ListItem click={this.openPopupSettings()} title="Settings"></ListItem>

here is the code

export default class extends React.Component {
  openPopupLanguage() {
        //this.$, true)
    render () {
    return (

second issue is opening the poup
normlay this works on f7 vue = > this.$, true)

but react gives error for popup , I defined popup in same component

and here is the popup code

      <Popup id="popup">
            <Navbar title="Language Settings">
                <Link popupClose>Close</Link>
            <Block>Lorem ipsum dolor sit amet</Block>


It has such property

this code is invalid, you probably want to



onClick={() => this.openPopupSettings()}


Thanks, initialy I tried onClick I know its common method but couldnt find it in docs instead I saw click event, I can get function work now but can not open popup

I see in f7 react docs app is same, so I try same code I use in vue but it doesnt work ? It gives not defined error for popup

this.$, true)

I use use a working popup html but not sure about react behaviour, do I need to do something extra for popup definition in react ? I tried to send popup as parameter when calling the function but didnt work


@nolimits4web listItem has the property but it doesnt work ? I can not get this open a popup

<ListItem popupOpen="#popup" title="Settings"></ListItem>