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)}
  );