Delete item from array - reactjs

Question

I make a very simple todo list and should be next to each generated items a delete-btn. How can I write this function via OnClick()? i have in App.js quite normal array and now should be deleted with Delete-btn any added items.

ShowListComponent:

export default function ShowList ({items}){
    const isEmpty = "Die Eingabe Feld muss nicht leer sein";


    return(
        <div className='itemList'>
            {items.map((item) => (
                <ul className='itemContainer'>

                    <li className='item-name'>
                        {item.itemName}
                    </li>

                    <div className='delete-btn'>
                        <Button type="primary" danger ghost>
                            Delete
                        </Button>
                    </div>

                </ul>
            ))}
        </div>
    );
}

List Component:

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

const [inputValue, setInputValue] = useState('');

const AddButtonClick = () => {

    if (inputValue === ""){
        alert("Eingabefeld ist Leer");
        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

like the AddButtonClick() create deleteButtonClick:

const deleteButtonClick = (index) => {
        const newItems = items && items.filter((element , i) => i !== index);
        setItems(newItems);
}

pass it to ShowList component and use it like so:

export default function ShowList ({items, deleteButtonClick}){
    const isEmpty = "Die Eingabe Feld muss nicht leer sein";


    return(
        <div className='itemList'>
            {items.map((item, index) => (
                <ul className='itemContainer'>

                    <li className='item-name'>
                        {item.itemName}
                    </li>

                    <div className='delete-btn'>
                        <Button type="primary" danger ghost onClick={() => deleteButtonClick(index)}>
                            Delete
                        </Button>
                    </div>

                </ul>
            ))}
        </div>
    );
}