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?
Please try this code, it works for me.
setData(data.filter(el => el[identifier] === undefined))
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>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);
};