Remove a component onClick in react

Question

I'm displaying a overlay page when a certain input is clicked. Now I want to remove that overlay page when a user clicks somewhere in that overlay. How can I do that?

I'm displaying the overlay on click like this

constructor(props) {
        super(props);

        this.state = {
            showComponent: false,
        };
        this.popup_ques = this.popup_ques.bind(this);

    }

    popup_ques() {
        this.setState({
            showComponent: true,
        });
    }

 render() {
        return (
            <div className="ff">
                <div className="middle_div">
                    <input className='post_data_input' placeholder="Ask your question here" ref="postTxt" onClick={this.popup_ques}/>
                </div>

                {this.state.showComponent ? <QuestionOverlay/> : null}

            </div>
        );
    }

My overlay is in the component QuestionOverlay

class QuestionOverlay extends Component {
    constructor() {
        super();
    }

    closeOverLay = (e) => {
        alert("fse");
    }

    render() {
        return (
            //Here I have implemented my overlay
        )
    }

}

export default QuestionOverlay;

So how can I close/remove the overlay component when I click somewhere on my overlay?

Brett DeWoody · Accepted Answer · 2017-02-14 09:50:33Z

1

Pass a function from the Overlay's parent component (the component which displays the Overlay) that is called onClick in the Overlay. This function will update this.state.showComponent of the parent to false to hide the Overlay.

Parent

constructor(props) {
    super(props);

    this.state = {
        showComponent: false,
    };
    this.popup_ques = this.popup_ques.bind(this);
    this.hide_overlay = this.hide_overlay.bind(this);

}

popup_ques() {
    this.setState({
        showComponent: true,
    });
}

hide_overlay() {
  this.setState({
    showComponent: false
  })
}

render() {
    return (
        <div className="ff">
            <div className="middle_div">
                <input className='post_data_input' placeholder="Ask your question here" ref="postTxt" onClick={this.popup_ques}/>
            </div>

            {this.state.showComponent && <QuestionOverlay hideOverlay={this.hide_overlay} />}

        </div>
    );
}

Overlay

class QuestionOverlay extends Component {
  constructor() {
    super();
  }

  closeOverLay = (e) => {
    alert("fse");
  }

  render() {
    return (
        <div onClick={this.props.hideOverlay}>
          // Overlay content
        </div>
    )
  }

}

export default QuestionOverlay;

edited Feb 14, 2017 at 9:50

answered Feb 14, 2017 at 8:47

Brett DeWoody

63.3k31 gold badges145 silver badges192 bronze badges

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

4 Comments

Andrei Dotsenko Over a year ago

I think it would be better to do binding this.hideOverlay.bind(this) in the constructor.

CraZyDroiD Over a year ago

@Brett DeWoody: Your approach is good but it does not work for me. I have inserted a alert just to see if the click event works. And it does. So the problem is not changing the state of the component to false.

Brett DeWoody Over a year ago

Try {this.state.showComponent && <QuestionOverlay hideOverlay={this.hide_overlay} />} as opposed to the ternary.

CraZyDroiD Over a year ago

yeah I got it to work. you were correct all along. I don't know what happened but it's working now

Collectives™ on Stack Overflow

Remove a component onClick in react

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related