'Input validation using DialogBox in react

I am building a react app and when i input text in the input i would like to perform two functions

  1. handleClose to = true;

  2. change out put to the component ImageGrid,

I have added the code from the component, have i done the right thing adding the correct function to the onClick in ?

Am i at least on the right track?

SEND HELP!

my solution:

import React, { useState } from 'react';

import PropTypes from 'prop-types'

import  getCat  from './ImageGrid'

// 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 = ({ ariaLabel }) => {
  const [open, setOpen] = React.useState(false);
  
  const handleClickOpen = () => {
    setOpen(true);
  };
  
  const handleClose = () => {
    setOpen(false);
  };

  // const handleGrid = () => {
  //   React.useState(true)
  // }
  
  function submitLink() {
    
    const inputUrl = Input;

    if (inputUrl == '' ){
      handleClose = false;
    } else {
      handleClose = true;
    }
  }

  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 
            onClick={ submitLink }
            color='primary' 
            autoFocus
            type='submit'>
            {/* onSubmit={handleGrid} */}
              Submit
            </Button>
          </DialogActions>
        </Dialog>
    </div>
  );
}

Input.inputProps = {
  ariaLabel: 'Please insert your URL below',
  tertiaryColor: 'tertiary'
}

Input.inputTypes = {
  ariaLabel: PropTypes.string.isRequired,
  tertiaryColor: PropTypes.string.isRequired,
};
export default DialogBox


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source