CODEWITHSUNDEEP
javascriptreactjs
Geoff_S
Geoff_S

Reputation: 5105

react mobile opens with button but not a clickable component

Hopefully this is pretty straightforward, but I can't seem to get anywhere.

I have a simple component where I've loaded in react-responsive-modal and created a simple modal to be opened on click.

The issue is that when I click the button element, it opens just fine. But when I click a component which calls the exact same 'open' function, it does nothing. Not even an error in the console.

How can I make this modal open when I click on the MiniCardComponent?

class MedJournalComponent extends React.Component {

      state = {
        open: false
      };

      onOpenModal = () => {
        this.setState({ open: true });
      };

      onCloseModal = () => {
        this.setState({ open: false });
      };

    render() {
        const { open } = this.state;
        return (
            <Column>

                <Row className={css(styles.cardsContainer)} wrap flexGrow={1} horizontal="space-between" breakpoints={{ 768: 'column' }}>
                    <Row className={css(styles.cardRow)} wrap flexGrow={1} horizontal="space-between" breakpoints={{ 384: 'column' }}>

                        <MiniCardComponent onClick={this.onOpenModal} active={this.props.selectedItem === 'Medical Journal'}  className={css(styles.miniCardContainer)} title="Medical Journal" value= <FaBookMedical /> />

                        <button onClick={this.onOpenModal}>Open modal</button>

                        <Modal open={open} onClose={this.onCloseModal}>
                          <h2>Simple centered modal</h2>
                          <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                            pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
                            hendrerit risus, sed porttitor quam.
                          </p>
                        </Modal>

                    </Row>
                </Row>
            </Column>
        );
  }
}

Upvotes: 0

Views: 124

Answers (1)

Seth Lutske
Seth Lutske

Reputation: 10792

Abstract react components don't do well with event handlers. Event handlers typically need to be attached to DOM elements. For example, if MiniCardComponent looked like this:

const MiniCardComponent = () => (

  <React.Fragment>
    <button>Yup</button>
    <button>Nope</button>
    <button>Perhaps</button>
  </React.Fragment>

)

How would React know which button which button to attach the onclick to? You need to dig into your MiniCardComponent component and decive which DOM element you want the onClick to fire on. You can then pass the onClick as a prop:

const MiniCardComponent = props => (

  <div>
    <button onClick={props.onClick}>Yup</button>
    <button>Nope</button>
    <button>Perhaps</button>
  <div>

)

Upvotes: 1

Related Questions