I want Popup to close, how do I do it?

Question

When I press the AddAction button from the Addaction component, I want the popup to close. ?

in fact, if I reach the onCloseAddActionModal method in my component which is popup from AddAction component, my problem will be solved.

AddAction Component:

   class AddAction extends React.Component { 

    constructor() {
        super();
        this.state = {
            items: [{id:null, actiontype: null}],
            error: null,
            isLoaded: false,
            selectId: null,
        }
        this.handleCheckChieldElement = 
        this.handleCheckChieldElement.bind(this); // set this,  because you need get methods from CheckBox 
      }

    componentDidMount = () => {
        ....
    }

    fetchAdd = (carid, offboardingactiontypeid) => {
        ...
    }

    handleCheckChieldElement = (id, e) => {
        this.setState({selectId: id})
    }

    render() {
      const items = this.state.items;
      return (

        <div>
                <ul className="popupAddAction">
                    {
                        items.map((item) => {
                            return (
                                <li className="list" key={item.id}>
                                    <input  key={item.id} onClick= 
                    {(e) 
                                 => 

                    this.handleCheckChieldElement(item.id, 
                                e)} type="checkbox" /> 
                                 {item.actiontype}
                               </li>
                            )
                        })
                    } 
                </ul>
                <div className="popupAddAction--btn">
                    <button
                                    onClick=
                                    { () => 
                 this.fetchAdd(this.props.id, this.state.selectId)}
                                    className="btn btn-primary 
                                   popupAddAction--btn" 
                                >
                                    Add Action
                    </button>
                </div>
              </div>
               );
              }
             } 

           export default AddAction;

Popup Component:

         class OffBoarding extends Component {
          this.state = {
          openAddAction: false
          };

          onOpenAddActionModal = () => {
            this.setState({ openAddAction: true });
          };    

          onCloseAddActionModal = () => {
            this.setState({ openAddAction: false });
          };
          render(){
          return{
          <div>
          <Button className="btn btn-danger commentPlus" onClick= 
           {this.onOpenAddActionModal}> <FontAwesomeIcon icon= 
           {faPlus}/></Button>
          </div>
          {this.state.openAddAction ? 
              <div style={styles}>
               <Modal open= 
              {this.state.openAddAction} onClose= 
              {this.onCloseAddActionModal} center>
                                      <AddAction id= 
          {this.state.carid} 
                                   close= 
          {this.state.openAddAction}/>
                </Modal>
               </div> : null
             }}
          }}

Answer 1

You can simply pass the onCloseAddActionModal method as prop while rendering AddAction component from OffBoarding component. And then, you can call that passed function as prop on "Add Action" button click ie

So in you popup component, change this:

 <AddAction id= 
      {this.state.carid} 
      close={this.state.openAddAction}/>

to this (passing function as prop):

<AddAction id= 
      {this.state.carid} 
      close={this.state.openAddAction}
      closeDialog={this.onCloseAddActionModal}/>

And then in your AddAction component, change this:

  <button
   onClick={() => 
   this.fetchAdd(this.props.id, this.state.selectId)}
   className="btn btn-primary popupAddAction--btn">
     Add Action
   </button>

to this (calling function passed as prop in previous step):

<button
  onClick=
  {() =>{ 
  this.fetchAdd(this.props.id, this.state.selectId);
  this.props.closeDialog();
  }}
  className="btn btn-primary popupAddAction--btn">
  Add Action
 </button>

Answer 2

If openAddAction flag is true then only addaction component will display right. Instead of open and close modal add below code to modal and in add action modal in fetch method set openAddAction to false. in your code you have communication from child to parent but you are trying to close modal based on child but modal exist in parent so make a communication to parent to child for that pass function through component

 <Modal isOpen = {this.state.openAddAction} center>
        <AddAction id= {this.state.carid}  
          closeModa={this.onCloseAddActionModal} />
 </Modal>

In addAction modal you have to add like this

fetchAdd = (carid, offboardingactiontypeid) => {
    this.setState({openAddAction:false});
    this.props.onCloseAddActionModal();
}

Call this closeModal method in fetchAdd method