How to open a popup from ListItem in react code?

Questions
1

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

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

here is the code

export default class extends React.Component {
  openPopupLanguage() {
      console.log('trying')
        //this.$f7.popup.open(popup, true)
  }
    render () {
    return (

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

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

and here is the popup code

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

It has such property http://framework7.io/react/list-item.html#list-item-properties

this code is invalid, you probably want to

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

or

onClick={() => this.openPopupSettings()}
1 Like
3

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.$f7.popup.open(popup, 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

4

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

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

@nolimits4web
@rastek

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.

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

Thanks.