title: Deleting object of a state array in React using id
body: <p>When I console.log(id) it give me the index of the object in the array and not the id I was trying to assign to it with the function that creates the object. So my question is how do I pull out a specific key value pair out of my arrays object and use it to make sure that I am deleting the right object?</p>
  <p>Also I am really really new to programming.</p>
  <pre><code>import logo from &quot;./logo.svg&quot;;
  import &quot;./App.css&quot;;
  import React, { useState } from &quot;react&quot;;
  import { nanoid } from &quot;nanoid&quot;;
  
  function App() {
      const [text, setText] = useState([]);
      const [textMaster, setTextMaster] = useState({
          paragraph: &quot;&quot;,
          id: nanoid(),
      });
  
      const handleSubmit = (e) =&gt; {
          e.preventDefault();
          const copy = [...text];
          copy.push(textMaster);
          setText(copy);
      };
  
      const handleClick = (e) =&gt; {
          handleSubmit(e);
      };
  
      const handleClickDelete = (id) =&gt; {
          console.log(id);
          const newText = text.filter((text) =&gt; text.id !== id);
          setText(newText);
      };
  
      return (
          &lt;div className=&quot;App&quot;&gt;
              &lt;header className=&quot;App-header&quot;&gt;
                  &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
                  &lt;p&gt;
                      Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
                  &lt;/p&gt;
                  &lt;a
                      className=&quot;App-link&quot;
                      href=&quot;https://reactjs.org&quot;
                      target=&quot;_blank&quot;
                      rel=&quot;noopener noreferrer&quot;
                  &gt;
                      Learn React
                  &lt;/a&gt;
  
                  &lt;form onSubmit={handleSubmit}&gt;
                      &lt;label&gt;
                          Essay:
                          &lt;textarea
                              name=&quot;item&quot;
                              key={textMaster.id}
                              type=&quot;text&quot;
                              value={textMaster.paragraph}
                              onChange={(e) =&gt; setTextMaster(e.target.value)}
                          /&gt;
                      &lt;/label&gt;
                      &lt;button onClick={(e) =&gt; handleClick(e)}&gt;
                          Add new text
                      &lt;/button&gt;
                  &lt;/form&gt;
                  &lt;ul&gt;
                      {text.map((item, id) =&gt; {
                          return (
                              &lt;&gt;
                                  &lt;li key={id}&gt;{item}&lt;/li&gt;
                                  &lt;button onClick={() =&gt; handleClickDelete(id)}&gt;
                                      Delete
                                  &lt;/button&gt;
                              &lt;/&gt;
                          );
                      })}
                  &lt;/ul&gt;
              &lt;/header&gt;
          &lt;/div&gt;
      );
  }
  
  export default App;
  </code></pre>