i have a div with mapped items of array and i need to delete item on click.
so onclick function deletes item, but there's no rerender in div, how can i update it?
{step08colorsLike?.length > 0 &&
[].map.call(step08colorsLike, (color) => {
const colorArr = color?.split(";");
const r = colorArr[0].split(":")[1];
const g = colorArr[1].split(":")[1];
const b = colorArr[2].split(":")[1];
const a = colorArr[3].split(":")[1];
return (
<span className={style.colorItem}>
<div
style={{
width: "20px",
height: "20px",
borderRadius: "3px",
outline: "1px solid #ffffff",
background: `rgba(${r},${g},${b},${a})`,
}}
>
<span
className={style.del}
onClick={() => {
console.log(step08colorsLike);
step08colorsLike.splice(
step08colorsLike.indexOf(color) - 1,
1
);
console.log(step08colorsLike);
}}
>
x
</span>
</div>
</span>
);
})}
CodePudding user response:
Try-out this one. I think this is a better solution for your problem.
import { useState } from "react";
function App() {
const colorMap = [
{ name: "Red", color: 255 },
{ name: "Green", color: 255 },
{ name: "Blue", color: 255 },
{ name: "Alpha", color: 255 },
];
const [colorState, setState] = useState(colorMap);
function removeColor(e, index) {
const tempArray = [...colorState];
tempArray.splice(index, 1);
setState(tempArray);
// setState([...tempArray])
}
return (
<div className="app">
<h4>Remove Color From Array</h4>
<div>
<button onClick={(event) => removeColor(event, 1)}>Remove Color</button>
</div>
<div className="colors">
<ul>
{colorState.map(function (item, index) {
return <li key={index}>{item.name}</li>;
})}
</ul>
</div>
</div>
);
}
export default App;
CodePudding user response:
Something like this should fix your issue.
const [colors, setColors] = useState(step08colorsLike);
const removeColor = (color) => {
//colors.splice(colors.indexOf(color) - 1, 1);
const newColors = colors.filter(c => c !== color);
setColors(newColors);
}
const renderColor = (color) => {
const colorArr = color?.split(";");
const r = colorArr[0].split(":")[1];
const g = colorArr[1].split(":")[1];
const b = colorArr[2].split(":")[1];
const a = colorArr[3].split(":")[1];
return (
<span className={style.colorItem}>
<div
style={{
width: "20px",
height: "20px",
borderRadius: "3px",
outline: "1px solid #ffffff",
background: `rgba(${r},${g},${b},${a})`,
}}
>
<span className={style.del} onClick={() => {removeColor(color)}}> x </span>
</div>
</span>
)
}
return (
{colors && colors.length > 0 && colors.map(renderColor)}
);