Show ErrorMsg if input-box is empty

Question

1. How can i check my Input, if this is empty, then show an Error-Msg.

2. How Should i add delete function to my Delete btn?

   import React, {useState} from 'react'; import {Button, Input} from "antd";

   export default function List ({items, setItems}){

   const [inputValue, setInputValue] = useState('');
   
   const AddButtonClick = () => {
       const inputCheck = document.getElementsByClassName('addItemInput').length;
       if (inputCheck === ""){
           alert("Test");
           return false
       } else {
   
           const newItem ={
               itemName: inputValue,
           };
   
           const newItems = [...items,newItem];
   
           setItems(newItems);
           setInputValue('');
       }
   
   }
   
   return(
       <>
   
           <Input value={inputValue} onChange={(event) =>
               setInputValue(event.target.value)}
                  name='input'
                  className='addItemInput'
                  placeholder="Artikel hinzufügen"
           />
   
           <Button
               type="primary"
               className='btn'
               onClick={() => AddButtonClick()}
           >Hinzufügen</Button>
   
       </>
   )
   

   }

Answer 1

To preform operations on the current value on an input, you can preform the opperation on the varible you feed into the "value" property. In this case, compare the value stored in the "inputValue" varible by doing: inputValue === "".

Answer 2

I think what you want is to check the element's value

const inputCheck = document.getElementsByClassName('addItemInput').value;
    if (inputCheck === ""){
        alert("Test");
        return false
    }
...

Don't know about the delete button as you really haven't provided any helpful context.

Answer 3

document.getElementsByClassName will get all element that class equal "addItemInput",

try this.

const inputCheck = document.getElementsByClassName('addItemInput')[0].value;
    if (inputCheck === ""){
        alert("Test");
        return false
    }
...