ReactJS Dialog with close button

Question

I want to add close button to my react pop up so I added this line

 <button onClick = {$('.scoreboard-trigger').close}>Close</button>

but when I clik Close button it does not close

here is my all component

import $ from 'jquery';
import React from 'react';

import { FormattedMessage } from 'util/IntlComponents';

import OkeyScoreboard from './OkeyScoreboard';

class OkeyScoreboardDialog extends React.Component {
  componentDidMount() {
    $('.scoreboard-trigger').leanModal({
      opacity: 0
    });
  }



  render() {
    const { scoreboard, profiles } = this.props;
    const scoreboardTitle = <FormattedMessage message="room_title.scoreboard"/>;

    return (<div id='scoreboardModal'
         className='scoreboard-modal modal'>

       <div className='modal-content'>
            <h4 className='center'>{scoreboardTitle}</h4>
          <OkeyScoreboard profiles={profiles} scoreboard={scoreboard}/>
                 <button onClick = {$('.scoreboard-trigger').close}>Close</button>
      </div>

      <div className='modal-footer'>

      </div>
    </div>);
  }
}


class OkeyScoreboardDialogTrigger extends React.Component {
  render() {
    const scoreboardTitle = <FormattedMessage message="room_title.scoreboard"/>;

    return <a className='scoreboard-trigger modal-trigger btn blue-grey darken-3'
              href='#scoreboardModal'>
      {scoreboardTitle}
    </a>;
  }
}


export { OkeyScoreboardDialog };
export { OkeyScoreboardDialogTrigger };

Pmon · Accepted Answer · 2016-05-20 10:25:29Z

1

I think you should wrap this in function

$('.scoreboard-trigger').close

in function and pass it to onClick method in button, I create the example wrap it in function close and pass it to the onClick

import $ from 'jquery';
import React from 'react';

import { FormattedMessage } from 'util/IntlComponents';

import OkeyScoreboard from './OkeyScoreboard';

class OkeyScoreboardDialog extends React.Component {
  componentDidMount() {
    $('.scoreboard-trigger').leanModal({
      opacity: 0
    });
  }
  close() {
     $('.scoreboard-trigger').close;
  }


  render() {
    const { scoreboard, profiles } = this.props;
    const scoreboardTitle = <FormattedMessage message="room_title.scoreboard"/>;

    return (<div id='scoreboardModal'
         className='scoreboard-modal modal'>

       <div className='modal-content'>
            <h4 className='center'>{scoreboardTitle}</h4>
          <OkeyScoreboard profiles={profiles} scoreboard={scoreboard}/>
                 <button onClick = {this.close()}>Close</button>
      </div>

      <div className='modal-footer'>

      </div>
    </div>);
  }
}


class OkeyScoreboardDialogTrigger extends React.Component {
  render() {
    const scoreboardTitle = <FormattedMessage message="room_title.scoreboard"/>;

    return <a className='scoreboard-trigger modal-trigger btn blue-grey darken-3'
              href='#scoreboardModal'>
      {scoreboardTitle}
    </a>;
  }
}


export { OkeyScoreboardDialog };
export { OkeyScoreboardDialogTrigger };here

answered May 20, 2016 at 10:25

Pmon

3514 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1688401 Over a year ago

this not work.I copy this but when click cose it does not close.I delete:here in last line of your code

EL AZIZI Youssouf · Accepted Answer · 2018-12-18 00:11:37Z

0

Try to use reacjs-popup A simple react popup component ( 3kb)

answered Dec 18, 2018 at 0:11

EL AZIZI Youssouf

3252 silver badges12 bronze badges

1 Comment

nirazlatu Over a year ago

why are you using jquery with react?

Collectives™ on Stack Overflow

ReactJS Dialog with close button

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related