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()}
1 Like

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>


I’m still cannot get use of the code below. Not working. But ListItem does have those properties. Using React Tab View from Framework7 CLI.

  <ListItem title="Login" onClick={() => firebase.auth().signOut()}>
 	  <Icon slot="media" f7="person_badge_plus" color="primary"></Icon>
  <ListItem title="Logout" loginScreenOpen="#my-login-screen">
 	  <Icon slot="media" f7="power" color="primary"></Icon>