Child props not getting updated

Question

The following is my parent component:

import { BaseModal } from "../base-modal";
import {
  closeParentModal,
  getData
} from "../../../redux/actions/parent-modal";
class ParentModal extends Component {
  constructor(props) {
    super(props);
  }


  componentDidMount() {
     const { isOpen, shelfId, Data } = this.props;
     if (isOpen) {
       Data(shelfId);
     }
  }
  render() {
    const { closeModal, shelfId, loader, ...props } = this.props;
    console.log("re render");
    return (
      <BaseModal
        {...props}
        className={"ParentModal-container"}
        closeModal={closeModal}
        loader
      >
      </BaseModal>
    );
  }
}


const mapDispatchToProps = dispatch => ({
  closeModal: () => {
    dispatch(closeParentModal());
  },
  Data: shelfId => {
    dispatch(getData(shelfId));
  }
});

const mapStateToProps = state => {
  const loader = getSafe(() => state.ParentModal.pending, false);
  console.log(loader);
  return {
    loader
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ParentModal);

Part of it's reducer:

export const parentModal = (state = initalState, action = {}) => {
         const { type } = action;
         switch (type) {
           case OPEN_PARENT_MODAL:
             return { ...state, active: true };
           case CLOSE_PARENT_MODAL:
             return { ...state, active: false };
           case FETCH_PENDING:
             return { ...state, pending: true };
           case FETCH_SUCCESS:
             return { ...state, pending: false, Data: action.Data };
           case FETCH_ERROR:
             return { ...state, pending: false, Error: action.error };
           default:
             return state;
         }
       };

Part of its action:

export const FetchSuccess = Data => {
  return {
    type: FETCH_SUCCESS,
    Data
  };
};


export const getData = shelfId => dispatch => {
  dispatch(FetchPending());
   const url = `xxxx`;
   const translate = resp => resp;
   fetchJSON(url, translate)
     .then(response => {
       if (response.status >= 400) {
         throw new Error("error");
       } else {
         dispatch(FetchSuccess(response.items.slice(0, 20)));
       }
     })
     .catch(error => {
       return error;
     });
};

The issue here is pending flag is false initially, and during the getData call it turns to true, and after it's a success it turns to false again.

In Parent Modal, the pending prop updates to false once its a success. But in BaseModal, this update is not getting reflected. Can some one guide me where I am going wrong?

Answer 1

There seems to be a problem with this code:

<BaseModal
   {...props}
   className={"ParentModal-container"}
   closeModal={closeModal}
   loader
>          
</BaseModal>

The loader prop should be loader={loader} . By default if you don't pass any value to any prop and just mention the prop name, React treats it true always. That's why the change is not being reflected in your BaseModal component.