javascript - removing an element in array within map in react - Stack Overflow

admin管理员组

文章数量:1330564

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

• javascript
• arrays
• reactjs
• mapping

Share Improve this question Follow asked Dec 22, 2021 at 9:56 Ghayas Ud DinGhayas Ud Din 33511 gold badge33 silver badges1818 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You 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