CODEWITHSUNDEEP
reactjsreact-native
Aoren
Aoren

Reputation: 105

Can't make simple popup using HOC

I'm really new to React and I don't really understand what I might be doing wrong.

I have this JSX file

import React from 'react'

const createPopup = (Body, Footer) => {
  class Popup extends React.PureComponent {
    render() {
      return <div className='popup-react'>
        <div className='popup-react-content'>

          <div className='popup-react-body'>
            <Body />
          </div>

          <div className='popup-react-footer'>
            <Footer />
          </div>

        </div>    
      </div>
    }
  }
  return Popup;
}

export default createPopup;

And I want to use it in another file like so:

class PopupBody extends React.PureComponent {
  render() {
    return <div>
      <SomeDatepicker>
    </div>;
  }
}

class PopupFooter extends React.PureComponent {
  render() {
    return <div>
      <button type="button">
        <span>Accept</span>
      </button>
      <button type="button" onClick={this.props.closePopup}>
        <span>Cancel</span>
      </button>
    </div>;
  }
}

const Popup = createPopup(PopupBody, PopupFooter);

class SomeForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {            
      showPopup: false
    };

    this.togglePopup = this.togglePopup.bind(this);
  }

  togglePopup() {
    this.setState({
      showPopup: !this.state.showPopup
    });
  }

  render() {
    return <div>
      <SomeOtherInputs />
      <If condition={this.state.showPopup}>
        <Popup
          title='Extend Due Date'
          closePopup={this.togglePopup()} />
      </If>
    </div>;
  }
}

I'm following the CSS approach to create a popup found in this article: https://codepen.io/bastianalbers/pen/PWBYvz

Doing the HOC suggested in this answer: React.js: Wrapping one component into another

Tried to understand the following article: https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

But I feel like my knowledge of React is playing against me. I want to return the first two classes in two separate functions and not declare them as separate classes but I can't make that work and I also can't make the closePopup function work when I pass the props to <Popup /> with no console errors.

Upvotes: 0

Views: 1039

Answers (2)

Miguel Calder&#243;n
Miguel Calder&#243;n

Reputation: 3091

You are calling the event handler on the event handler attribute. You need to pass the function reference instead. Change this:

                   <Popup
                       title='Extend Due Date'
                       closePopup={this.togglePopup()} />

To this (remove the parens):

                   <Popup
                       title='Extend Due Date'
                       closePopup={this.togglePopup} />

So you were in fact hiding the popup when you wanted to render it.

Upvotes: 1

Chinmay Chaudhary
Chinmay Chaudhary

Reputation: 131

In the render method of SomeForm you are invoking this.togglePopup instead of passing it as a callback.

Try 

<Popup
  title='Extend Due Date'
  closePopup={this.togglePopup} 
/>

Upvotes: 1

Related Questions