CODEWITHSUNDEEP
reactjssemantic-ui
Mostafa Ghadimi
Mostafa Ghadimi

Reputation: 6786

React Semantic UI Modal is not Shown

I'm trying to show a modal to the user using react-semantic-ui. Whenever I put the modal component under Navigation class it works well. Unfortunately, whenever I want to show the modal in LoginRegistrationMenu component it doesn't work properly and not even shown anything!

export default class Navigation extends Component {
  constructor(props){
    super(props)
    this.state = {
      showMenu: false
    }
    this.showMenu = this.showMenu.bind(this)
    this.hideMenu = this.hideMenu.bind(this)
  }


  showMenu(){
    this.setState({
      showMenu: true
    })
    document.addEventListener('click', this.hideMenu)
  }

  hideMenu(){
    this.setState({
        showMenu: false
    })
    document.removeEventListener('click', this.hideMenu)
  }


  render() {
    return (
      <div className="navigation-wrapper">
        <div className="navigation">      
            <div>
              <Link to='/needs'>
                <div>
                  needs
                </div>
              </Link>
            <div className="login-register" onClick={this.showMenu}>
              <Icon name="user circle" size='big' color={this.state.showMenu? 'red': 'black'} />
              {this.state.showMenu ? <LoginRegistrationMenu/> : null}
            </div>
        </div>
      </div>
    )
  }
}

class LoginRegistrationMenu extends Component {
  render () {
    return (
      <div>
        <div className="login-register-dialogue">
            <Modal
              trigger={<div>login</div>}
              header='Reminder!'
              content='Call Benjamin regarding the reports.'
              actions={['Snooze', { key: 'done', content: 'Done', positive: true }]}
            />
          <hr/>
          <a href="#">
            <div>sign up</div>
          </a>
        </div>
      </div>
    )
  }
}

How can I change the above code to make it work well?

Upvotes: 1

Views: 1054

Answers (1)

ravibagul91
ravibagul91

Reputation: 20765

Considering you have imported everything, and added semantic.min.css correctly.

I think the problem is here,

<div className="login-register" onClick={this.showMenu}>
    <Icon name="user circle" size='big' color={this.state.showMenu? 'red': 'black'} />
    {this.state.showMenu ? <LoginRegistrationMenu/> : null}  //problem line
</div>

You have added, LoginRegistrationMenu component inside the div on which you have written onClick event. So cliking on login div will not show Modal, but call showMenu function again. You need to do this,

<div className="login-register" onClick={this.showMenu}>
    <Icon name="user circle" size='big' color={this.state.showMenu? 'red': 'black'} />
</div>

{this.state.showMenu ? <LoginRegistrationMenu/> : null}  //Keep this outside of div

Another thing is, you don't do this,

document.addEventListener('click', this.hideMenu)

It's default behaviour that, When Modal is open and you click outside of Modal it will get close.

If you want toggle functionality here,

<div className="login-register" onClick={this.showMenu}>
    <Icon name="user circle" size='big' color={this.state.showMenu? 'red': 'black'} />
</div>

I suggest you to do this,

<div className="login-register" onClick={this.toggleMenu}>
    <Icon name="user circle" size='big' color={this.state.showMenu? 'red': 'black'} />
</div>

And your toggleMenu function should be,

toggleMenu(){
  this.setState({
    showMenu: !this.state.showMenu
  })
}

Now clicking on the same Icon will toggle your menu.

Upvotes: 1

Related Questions