How to load modal first when screen loads

Question

I have a modal component called Modal.js and a main page component called Apps.js . What i want to achieve is, how can i load the modal box in modal.js as i navigate in to Apps.js . ie I want to call Modal.js component first in my Apps.js component. The modal box should trigger and pop up once any user tries to load page Apps.js . How do i achieve that ?

PS: New to React

Modal.Js

function Transition(props) {
   return <Slide direction="up" {...props} />;
}

export default class AlertDialogSlide extends React.Component {

   state = {
      open: false,
   };

   handleClose = () => {
      this.setState({ open: false });
   };

   render() {
      return (
         <div>
            <Dialog
               open={this.state.open}
               TransitionComponent={Transition}
               keepMounted
               onClose={this.handleClose}
               aria-labelledby="alert-dialog-slide-title"
               aria-describedby="alert-dialog-slide-description"
            >
               <DialogTitle id="alert-dialog-slide-title">

               </DialogTitle>
               <DialogContent>
               </DialogContent>

            </Dialog>
         </div>
      );
   }
}

Apps.JS

class Carts extends Component {

 componentDidMount(){

 }

} Image

Answer 1

You can pass your open state via props.

You can do the following code into your modal file:

componentDidMount () {
    this.setState({open: this.props.modalOpen})
}

Then into your App.js or another file, you just do:

<AlertDialogSlide modalOpen={true} />