title: removing an element in array within map in react
body: <p>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. <a href="https://codesandbox.io/s/angry-wu-4dd11?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/angry-wu-4dd11?file=/src/App.js</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 ( &lt;
      div className = "App" &gt; {
        data.map(function(val, id) {
          return ( &lt;
            span key = {
              id
            }
            className = "select__item"
            onClick = {
              (e) =&gt; {
                data.splice(data.indexOf(val), id + 1);
                console.log(data);
              }
            } &gt;
            {
              val.name
            } &lt; br / &gt; &lt; br / &gt;
            &lt;
            /span&gt;
          );
        })
      } &lt;
      /div&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>