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?

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

  1. Advance search should be opened anyway as it needs to be clicked. The things you should control is the content inside advance search. Therefore, the state should be passed into AdvanceSearch as props.

    //Search.js
    closeTab = () => {
            this.setState({showTab: false});
            console.log('closeTab state', this.state.showTab);
    }
    
    
    render() {
            return (
                <div class="row">
                    <div class="col-md-2" onClick={this.closeTab}>
                       //skipped code
                    </div>
    
    
                    <AdvancedSearch isOpen={this.state.showTab} onClick={this.openTab}/> 
                </div>
            )
    }
    
    //advanceSearch.js
    const advancedSearch = ({isOpen, open}) => {
        return (
           {isOpen && (
               <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    //skipped code
                </div>
            </div>
        </div>
           )}
    )
    
    
    Reply

Leave a Comment