title: Get row data based of onclick event react, using html tables in react
body: <p>newbie to react I was previously using ParentNode in my previous non react project to get values that were on the same row as the button the triggered the onclick, so here is the problem</p>
  <p>This the table rendered below
  <a href="https://i.stack.imgur.com/q990A.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>So the problem I am experiencing is I am unable to access the value right of the delete question button, what is the best way to do this?</p>
  <p>The component that renders that table</p>
  <pre><code>import React, { useState } from 'react';
  import { Button } from 'semantic-ui-react';
  import { currentloginid } from '../login/loginid.js';
  import { deletequestion } from '../question/deletequestion.js';
  
  // App component just as an example
  export const ViewQuestionComponent = () =&gt; {
    let [state, setState] = useState([]);
    const handleViewQuestion = async () =&gt; {
      try {      
        const response = await fetch('http://localhost/gotaquestion/api/api.php?action=viewquestion', {
          method: 'GET',
          credentials: 'include'
        });
  
        const data = await response.json();
        const result = await data;
        // const id = await currentloginid(); // I didn't see where you use this id
        setState(data);
      } catch (e) {
        console.log(e);
      }
    }
  
    return (
      &lt;div&gt;
        &lt;ViewQuestion onClick={handleViewQuestion} /&gt;
        &lt;div id=&quot;questions&quot;&gt;
          &lt;Table rows={state}&gt;
            &lt;DeleteButton onClick={deletequestion} /&gt;
          &lt;/Table&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    );
  };
  
  export function ViewQuestion({onClick}) {
      return (
          &lt;Button onClick={onClick}&gt;View Question&lt;/Button&gt;
      );
  }
  
  export default ViewQuestion;
  
  const Table = ({rows, children}) =&gt; (
    &lt;table className=&quot;ui single line table&quot;&gt;
      &lt;tbody&gt;
       { rows.map(row =&gt;
         &lt;tr key={row.questionid}&gt;
          &lt;td&gt;{row.question}&lt;/td&gt;
          &lt;td&gt;{row.timestamp}&lt;/td&gt;
          &lt;td&gt;{row.catagories}&lt;/td&gt;
          &lt;td&gt;{(row.answer === null ? &quot;Not Answered&quot; : row.answer)}&lt;/td&gt;
          &lt;td&gt;{children}&lt;/td&gt;
          &lt;td&gt;{row.questionid}&lt;/td&gt;
         &lt;/tr&gt;
        )}
     &lt;/tbody&gt;
    &lt;/table&gt;
  );
  
  const DeleteButton = ({onClick}) =&gt; (
    &lt;button className=&quot;ui negative basic button&quot; onClick={onClick.bind(this)}&gt;Delete Question&lt;/button&gt;
  );
  </code></pre>
  <p>The function that gets triggered when the button is pressed</p>
  <pre><code>export function deletequestion(row) {
      console.log(&quot;Hi&quot;);
      var questionid = row;
      console.log(questionid);
      fetch('http://localhost/gotaquestion/api/api.php?action=deletequestion', 
          {
              method: 'GET',
              credentials: 'include'
          }
          )
  }
  </code></pre>
  <p>What is the best way to get the questionid value. A detailed explanation would be great, thank you :)</p>