Closing a pop-up component and setting state to False after clicking outside the component in the background

Here is my Search.js component.

class Search extends Component {
    state = {
        doctors: [],
        showTab: false
    }

    openTab = () => {
        this.setState({showTab: true});
        console.log('openTab state', this.state);
    }

    render() {
        let advancedSearch = null;
        if (this.state.showTab===true) {
            advancedSearch = (<AdvancedSearch />)
        }

        return (
            <div class="row">
                <div class="col-md-2">
                    <div class="form-group">
                        <button class="btn btn-md btn-primary" data-toggle="modal" data-target="#myModal" onClick={this.openTab}>Advanced Search</button>
                    </div>
                </div>
                {advancedSearch}
            </div>
        )
    }
}

And this is my Advanced Search component. No need to look at the code in depth.

const advancedSearch = (props) => {
    return (
        <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated bounceInRight">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title"> Advanced Search <i class="fa fa-search"></i> </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                        {searchFieldsInner.map((field, idx) => (
                            <SearchField
                                key={idx}
                                colWidth={field.colWidth}
                                placeholder={field.placeholder}
                                formControl={field.formControl} />
                        ))}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Search</button>
                </div>
            </div>
        </div>
    </div>
)

Basically, when I click on the advancedSearch, I want the state to turn to true, which I am doing with the if statement. However, once the component opens (basically a pop-up view that slides down), and when I click on the background after which the pop-up closes, I want to turn the showTab state to false. Any suggestions on how to do it?

75 thoughts on “Closing a pop-up component and setting state to False after clicking outside the component in the background”

  1. Hello just wanted to give you a quick heads up.

    The text in your content seem to be running off the screen in Chrome.
    I’m not sure if this is a formatting issue or something to do with browser compatibility but I figured I’d post
    to let you know. The style and design look great though!
    Hope you get the problem resolved soon. Kudos

    Reply
  2. i need loan today, i need loan to start the business. need a loan but my credit is bad need loan now need a loan been refused everywhere i need loan without interest, cash advance payday loans bad credit ok, cash advance online, cash advance loans, 3 month cash advance loans. Economics describes commerce, provides business loans.

    Reply

Leave a Comment