React: remove object inside an array

Question

I have the following structure assembled inside a state (data, setData):

[
  {
    4b080412-b22c-40fe-a67e-510f96d50063:{
      id: 1231,
      name: "Anna",
      department: "Business"
    }
  },
  {
    8d319764-a49e-4465-a166-a701a5cc2b77:{
      id: 456,
      name: "Tony",
      department: "Marketing"
    }
  },
  {
    23ea617b-210e-4329-9ab1-ecd2afa12e4d:{
      id: 99,
      name: "Francis",
      department: "Sales"
    }
  },
]

I put an 'onClick' on the button passing an 'ID' (eg: '23ea617b-210e-4329-9ab1-ecd2afa12e4d').

But I am not able to delete the related ID. I tried the following ways, but without success:

  const handleClick = (identifier: string) => {        
    setData(
      data.filter((el: any) => {
        if (el[identifier] !== undefined) return el[identifier].product !== id;
      }),
    );

also:

  const handleClick = (identifier: string) => {        
    delete data[identifier]
  );

Can anyone help me with how can I access this ID?

This structure is pretty hard to use. The key in each object should probably be a key-value pair to remove a layer of nesting. Otherwise you have to do Object.keys(obj)[0] just to figure out what the identifier is. — ggorlen
– ggorlen, Commented Aug 23, 2022 at 17:31

PaladinDotEth · Accepted Answer · 2022-08-23 17:31:34Z

2

Please try this code, it works for me.

setData(data.filter(el => el[identifier] === undefined))

answered Aug 23, 2022 at 17:31

PaladinDotEth

3541 silver badge9 bronze badges

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

1 Comment

Nosredna Over a year ago

index.tsx:124 Uncaught TypeError: Cannot read properties of undefined (reading '0d9ce0a2-71cf-4128-9bd2-c98c20c379ee')

Dezzley · Accepted Answer · 2022-08-23 17:30:09Z

1

Try running this one:

const handleClick = (identifier: string) => {
  setData(
    data.filter((obj) => {
      return Object.keys(obj)[0] !== identifier;
    }),
  );
};

answered Aug 23, 2022 at 17:30

Dezzley

1,9151 gold badge20 silver badges22 bronze badges

Comments

Anurag Sharma · Accepted Answer · 2022-08-23 17:36:13Z

1

hi Nosredna I have gone through the approach u have used, and have some logical issues

you can try it like this

const handleClick = (identifier: string) => {        
     const newArr=data.filter(el=>!el[identifier])
     setData(newArr);
};

answered Aug 23, 2022 at 17:36

Anurag Sharma

1288 bronze badges

Comments

Mulan · Accepted Answer · 2022-08-23 17:52:21Z

If d is non-null and identifier is present in d, then return false to filter the item out -

const onRemove = identifier =>
  setData(data.filter(d => !(d && d[identifier])))

Run the demo below and verify the result in your own browser -

function App({ initData = [] }) {
  const [data, setData] = React.useState(initData)
  const onRemove = uuid => event =>
    setData(data.filter(d => !(d && d[uuid])))
  return <div>
    {data.map((d, key) =>
      <Item key={key} item={d} uuid={Object.keys(d)[0]} onRemove={onRemove} />
    )}
  </div>
}

function Item({ item, uuid, onRemove }) {
  const data = item[uuid]
  return <div>
    <h3>{uuid}</h3>
    <pre>{JSON.stringify(data)}</pre>
    <button type="button" onClick={onRemove(uuid)}>❌</button>
  </div>
}

const data = [
  {
    "4b080412-b22c-40fe-a67e-510f96d50063":{
      id: 1231,
      name: "Anna",
      department: "Business"
    }
  },
  {
    "8d319764-a49e-4465-a166-a701a5cc2b77":{
      id: 456,
      name: "Tony",
      department: "Marketing"
    }
  },
  {
    "23ea617b-210e-4329-9ab1-ecd2afa12e4d":{
      id: 99,
      name: "Francis",
      department: "Sales"
    }
  },
]


ReactDOM.render(<App initData={data} />, document.body)

div > div { background-color: #eee; margin-bottom: 1rem; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

Collectives™ on Stack Overflow

React: remove object inside an array

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related