admin管理员组文章数量:1331849
On the click of the span, i want to remove that element from the array and run the map again so that the spans also gets removed. I don't know if the syntax is wrong or what. This is the link to sandbox where I wrote my code. =/src/App.js
import "./styles.css";
export default function App() {
const data = [{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
];
return ( <
div className = "App" > {
data.map(function(val, id) {
return ( <
span key = {
id
}
className = "select__item"
onClick = {
(e) => {
data.splice(data.indexOf(val), id + 1);
console.log(data);
}
} >
{
val.name
} < br / > < br / >
<
/span>
);
})
} <
/div>
);
}
On the click of the span, i want to remove that element from the array and run the map again so that the spans also gets removed. I don't know if the syntax is wrong or what. This is the link to sandbox where I wrote my code. https://codesandbox.io/s/angry-wu-4dd11?file=/src/App.js
import "./styles.css";
export default function App() {
const data = [{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
];
return ( <
div className = "App" > {
data.map(function(val, id) {
return ( <
span key = {
id
}
className = "select__item"
onClick = {
(e) => {
data.splice(data.indexOf(val), id + 1);
console.log(data);
}
} >
{
val.name
} < br / > < br / >
<
/span>
);
})
} <
/div>
);
}
Share
Improve this question
asked Dec 22, 2021 at 9:56
Ghayas Ud DinGhayas Ud Din
3351 gold badge3 silver badges18 bronze badges
3
-
You should use
useState
hook to store the data and update it. React cannot magically trigger a rerender when some variable changes. – Ramesh Reddy Commented Dec 22, 2021 at 10:00 -
You should use
useState
for this to work. The way you do it right now neither trigger a re-rendering, nor modifies the original array. – Gaëtan Boyals Commented Dec 22, 2021 at 10:00 - Can you show me the example. I am new to react and sometimes i get stuck with the syntax. – Ghayas Ud Din Commented Dec 22, 2021 at 10:03
2 Answers
Reset to default 4You should use useState
hook in this case, because React won't re-render automatically. You have to tell react externally, one way is to change state and react will rerender ponents automatically as:
Live Demo
import { useState } from "react";
import "./styles.css";
export default function App() {
const [data, setData] = useState([
{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
{
name: "Alex",
},
{
name: "John",
},
{
name: "Leo",
},
{
name: "Murphy",
},
]);
const removeItem = (index) => {
setData(data.filter((o, i) => index !== i));
};
return (
<div className="App">
{data.map(function (val, id) {
return (
<span
key={id}
className="select__item"
onClick={() => removeItem(id)}>
{val.name} <br />
<br />
</span>
);
})}
</div>
);
}
function handleRemove(id) {
// this work for me
const newList = this.state.newList.filter((item) => item.id !== id);
this.setState({newList});
}
本文标签: javascriptremoving an element in array within map in reactStack Overflow
版权声明:本文标题:javascript - removing an element in array within map in react - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742216122a2434596.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论