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>

    </>
)

}

Are you asking how to remove an item from an array so React knows the array has been updated? How are the mechanics different from how you're already adding an item? — Dave Newton
– Dave Newton, Commented Mar 22, 2022 at 14:38

Dharman · Accepted Answer · 2022-03-22 14:57:09Z

2

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>
    );
}

edited Mar 22, 2022 at 14:57

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Mar 22, 2022 at 14:51

free bug coding

2342 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Delete item from array - reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related