I am trying to say on submit to hide the dialog box and show my cat images, very new to react and i have gotten this far already and this is the last function i need to set in my app to add the other smaller details like validation etc....

I am having problems getting this change to happen,is there any refactoring i could do as well?

import React from 'react';

import ImageGrid from './ImageGrid';

import '../index.css'

// Material UI 
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import Input from '@material-ui/core/Input'
import Dialog from '@material-ui/core/Dialog';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';





const DialogBox = () => {
  const [open, setOpen] = React.useState(false);
  
  const handleClickOpen = () => {
    setOpen(true);
  };
  
  const handleClose = () => {
    setOpen(false);
  };

  // function to hide the dialog box and show the ImageGrid
  function showCats() {
    
    // Get the modal
    const startPage = document.getElementsByClassName('modal');

    // get the image elements
    const catImages = document.getElementsByTagName(ImageGrid);

    // target the submit button
    const button = document.getElementsByClassName('toggle');

    if (Input === '') {
      alert('Please enter a valid search')
      button.current.disabled = true;
    } else if (Input === String) {
      startPage.style.display = 'none';
      catImages.style.display = 'show';
    } else {
      button.style.display = 'disabled'
    }

    showCats();
    
  }

  const handleSubmit = () => {
    console.log('i work')
    showCats()
  }

  return (
    <div className='modal'> 
      <Grid container justifyContent='center'>
        {/* Button To Open Dialog Box */}
        <Button 
        style={{border: '1px solid #ebc340', color: '#ebc340'}}
        variant="outlined" 
        color="secondary" 
        onClick={handleClickOpen}>
          Welcome to my Case Study, Click to begin
        </Button>
      </Grid>
        {/* Dialog Box Content */}
        <Dialog
        className='dialog-btn'
        open={open} 
        onClose={handleClose}>
          <DialogTitle>
            To begin the application, please insert your URL below:
          </DialogTitle>
          <DialogContent>
          <Input 
          placeholder="Enter Your Link Here" 
          // inputProps={ariaLabel} 
          fullWidth/>
          </DialogContent>

          {/* Dialog Box Actions */}
          <DialogActions>
            <Button 
            onClick={handleClose} 
            color="secondary">
              Cancel 
            </Button>
            
            <Button 
            className='toggle'
            onClick={handleSubmit}
            color='primary'
            autoFocus
            type='submit'>
              Submit
            </Button>
          </DialogActions>
        </Dialog>
    </div>
  );
}


export default DialogBox

CodePudding user response：

set open to false inside your handleSubmit function:

import React from 'react';

import ImageGrid from './ImageGrid';

import '../index.css'

// Material UI 
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import Input from '@material-ui/core/Input'
import Dialog from '@material-ui/core/Dialog';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';





const DialogBox = () => {
  const [open, setOpen] = React.useState(false);
  const [url, setUrl] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };
  
  const handleClose = () => {
    setOpen(false);
  };

  const handleSubmit = () => {
   setOpen(false)
  }

  return (
    <div className='modal'> 
      <Grid container justifyContent='center'>
        {/* Button To Open Dialog Box */}
        <Button 
        style={{border: '1px solid #ebc340', color: '#ebc340'}}
        variant="outlined" 
        color="secondary" 
        onClick={handleClickOpen}>
          Welcome to my Case Study, Click to begin
        </Button>
      </Grid>
        {/* Dialog Box Content */}
        <Dialog
        className='dialog-btn'
        open={open} 
        onClose={handleClose}>
          <DialogTitle>
            To begin the application, please insert your URL below:
          </DialogTitle>
          <DialogContent>
          <Input 
            placeholder="Enter Your Link Here" 
            fullWidth
            onChange={(e)=> setUrl(e.target.value)}
          />
          </DialogContent>

          {/* Dialog Box Actions */}
          <DialogActions>
            <Button 
            onClick={handleClose} 
            color="secondary">
              Cancel 
            </Button>
            
            <Button 
            className='toggle'
            onClick={handleSubmit}
            color='primary'
            autoFocus
            type='submit'>
              Submit
            </Button>
          </DialogActions>
        </Dialog>

     {/* Show the image */}
     {!open && url.trim() 
      ? <img src={url} alt="cat"/>
      : <p>Open the dialog and insert your url to see the image<p/>
      }
    </div>
  );
}


export default DialogBox