Remove an element from an array of objects in react js

Question

I am new to react Js. I want to remove an element from the array .,

I have an array which is like ,

array = [{ Id: "L0", value="asas"}]

So, Now What I have is that this value is in this.props.array.

Here I get the id which I should remove, So How can compare that array objects Id and remove that particular.

Because I don't want to mutate that array.

Thanks in advance .

onRemoveRow(e, id) {

    }

For adding ,

 const tempObj = {
                id: 'L' + id,
                technologyId: 0,
                technology: '',
                type: '',
                numberOfQuestions: ''
            }
            const addData = [...this.props.lowData.Low, tempObj];

Sagiv b.g · Accepted Answer · 2018-09-26 18:59:07Z

2

You can use filter to return a new array with the relevant item excluded:

const newArray = items.filter(item => item.id !== id)

It doesn't matter where you store the array (state, redux store etc..).

Here is a small running example of adding and removing items from an array in state:

class Item extends React.Component {
  remove = () => {
    const { id, onRemove } = this.props;
    onRemove(id);
  };

  render() {
    const { text } = this.props;
    return (
      <div style={{ display: "flex" }}>
        <button onClick={this.remove}>Remove</button>
        <div>{text}</div>
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    items: [
      { id: 1, text: "item 1" },
      { id: 2, text: "item 2" },
      { id: 3, text: "item 3" }
    ]
  };

  addItem = () => {
    this.setState(state => {
      const { items } = state;
      const newId = uuid();
      const newItem = { id: newId, text: `item ${newId}` };
      return {
        items: [...items, newItem]
      };
    });
  };

  onItemRemove = itemId => {
    this.setState(state => {
      const { items } = state;
      const filteredItems = items.filter(item => item.id !== itemId);
      return {
        items: filteredItems
      };
    });
  };

  render() {
    const { items } = this.state;
    return (
      <div>
        <div>
          <button onClick={this.addItem}>Add Item</button>
          <hr />
        </div>
        {items.map(item => (
          <Item
            key={item.id}
            id={item.id}
            text={item.text}
            onRemove={this.onItemRemove}
          />
        ))}
      </div>
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.js"></script>

<div id="root"/>

edited Sep 26, 2018 at 18:59

answered Sep 26, 2018 at 18:50

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

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

2 Comments

ganesh kaspate Over a year ago

Actually, I don't have my data in the state .

Sagiv b.g Over a year ago

It doesn't matter. Wherever you manage your data, filter is a way to remove items.

Shubham Khatri · Accepted Answer · 2018-09-26 19:02:02Z

0

You need to provide a handler to the child component along with the array values. This handler is what will update the data in the redux store

Action

const handleRemove =(id) => {
    return {
        type: 'REMOVE',
        id
    }
}

Reducers:

const ArrayItem =  (state, action) => {
    switch(action.type) {
        case 'REMOVE': return state.filter(item => item.Id !== action.id);
        default: return state;
    }
}

Child

onRemove = (id) => {
    this.props.handleRemove(id)
}

edited Sep 26, 2018 at 19:02

answered Sep 26, 2018 at 18:52

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

13 Comments

ganesh kaspate Over a year ago

Actually Sorry but there is no state for this array.

Shubham Khatri Over a year ago

where exactly is the array coming from as prop to child.

ganesh kaspate Over a year ago

Actually I already have that in the store so I take it from there like from mapStateToProps.

Shubham Khatri Over a year ago

In that case you need to dispatch an action, that updates the state in the store

ganesh kaspate Over a year ago

Yes, I have to dispatch an action, but here first I want to remove that element and then I will take that array and again I am going to update the store with that array.

|

Collectives™ on Stack Overflow

Remove an element from an array of objects in react js

2 Answers 2

2 Comments

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related