Delete item from array in React

Question

When I press the delete icon, I want that item to be deleted. but the number at the beginning of the ordered list is not broken. It is class component. what should be in removeItem method ?

No code currently because I try so much things of that and nothing working so I end up on console.logs watch what happened so I deleted it

const ProfileSettings = observer(
class ProfileSettings extends React.Component {
    constructor(props) { 
        super(props)
        this.state = {
            expandIconPosition: 'left',
            buttonDisable: false,
            fetchedNotificationData: [],
            spinning: true,
            checkedA: true,
            checkedB: true,
            checkedC: true,
            list: [],
        };
    }



addListItem = () => {
        var test = this.state.list;
        
        test.push({ text: "",selected:false });            

        this.setState({
            list: test
        });

    }
removeItem = () => {
        ???????????
    }

<div style={{ backgroundColor: "#ffffff", borderRadius: 16, padding: 10, minHeight: 140, width: 406, borderRadius: 8, marginTop: 10, boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(0, 0, 0, 0.14)" }}>
                                    {(this.state.list.length !== 0) ? this.state.list.map((row) => (
                                        <div className="row" style={{borderRadius:4,marginLeft:5,marginRight:5,paddingLeft : 15, backgroundColor : (row.selected) ? "#1A32FF" : "#FFF"     }}>
                                            <span style={{ marginTop: 2,color:(row.selected) ? "#FFF" : "black" }}>{this.state.list.indexOf(row) + 1}.</span>
                                            <TextField InputProps={{
                                                style:{
                                                    color: row.selected ? 'white' : 'black'
                                                  },
                                                onClick:()=>this.changeRowSelectedOption(row)
                                            }}id="standard-basic" style={{ width: "50%",marginLeft:3 }}></TextField>

                                            <IconButton className={(row.selected) ? "selectedDeleteIconclass" : "deleteIconclass" }  style={{ float: "right" , marginLeft : 115,marginTop:-8}} onClick={() => this.removeItem()}>
                                                <Delete />
                                            </IconButton>
                                        </div>
                                    )) : null}
                                </div>
                            </div>

https://stackoverflow.com/questions/37755997/why-cant-i-directly-modify-a-components-state-really You are mutating the state. Don't do that unless you want bugs and unintuitive behavior. — CertainPerformance, Mar 30 '21 at 15:30
Okay i got it. So what should i do for removeItem how can i do this ? — Furkan Çetin, Mar 30 '21 at 15:34
Sounds like you may want to take some tutorials on React. [React's site actually has a pretty good one](https://reactjs.org/tutorial/tutorial.html). — Heretic Monkey, Mar 30 '21 at 15:34

score 0 · Answer 1 · answered Mar 30 '21 at 16:00

0

You need to use an array method like filter which is going to return a new array based on a callback.

Doing something like this should work:

removeItem = (item) => {
   var test = [...this.state.list];
   const newArr = test.filter(el => el.text !== item.text);

   this.setState({
       list: newArr
   })

}

The item parameter that removeItem receives is the element you're trying to remove and the filter method is going to return you a new array with all the elements that don't have the text of the element you passed to removeItem function

answered Mar 30 '21 at 16:00

Brian Polanco

48
1
8

I tried this. I added a lot of elements and deleted 1, but it deletes the whole list – Furkan Çetin Mar 30 '21 at 16:22
That's because all elements probably have the same value on the text property – Brian Polanco Mar 31 '21 at 17:03

Delete item from array in React

1 Answers1