title: Delete row from a table, deleteRow(id), remove() or use useState () in Reactjs
body: <p>I have a component with a table that is loaded with the data sent by the REST API, my question more than anything, is if it is good to delete a row  with remove () or deleteRow (index) entering the DOM or I have to manipulate the DOM through a state (useState) for good practice or something like that.</p>
  <p>Additional info: I have gotten used to manipulating the DOM directly with pure javascript when making static web pages, but in React I think you have to use props, state, hooks to manipulate the DOM elements or am I wrong? there must be cases I guess.</p>
  <p>DOM TRAVERSING</p>
  <pre><code>export default function App() {
    const data = ['Eli','Smith', 'Jhon']
    const handleDelete = (index,e) =&gt; {
        //I can save an ID in &lt;tr&gt; through datasets (data-) 
        //to get it by traversing the DOM when the user clicks and delete it
        //also in my database (API), that's Ok?
        e.target.parentNode.parentNode.parentNode.deleteRow(index)
        
    }
    const rows = data.map((item, index) =&gt; {
      return (
        &lt;tr key={index}&gt;
          &lt;td&gt;{item}&lt;/td&gt;
          &lt;td&gt;&lt;button onClick={e =&gt; handleDelete(index,e)}&gt;Delete&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
      )
    })
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;table&gt;
          {rows}
          &lt;/table&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>That's OK ?</p>
  <p>Or do I have to put the rows in a state (useState) and update it by removing the  and re-rendering?</p>