title: Get input field inner html based of position of onclick event react tables
body: <p>I and trying to get the inner html value of the input field based from where the button is clicked input field shown below.</p>
  <pre><code>&lt;input id=&quot;newanswer&quot; placeholder=&quot;Create New Answer Here&quot;&gt;&lt;/input&gt;
  </code></pre>
  <p>I want to be able to get that value and add it as an argument the function below</p>
  <pre><code>&lt;button
      className=&quot;ui negative basic button&quot;
      onClick={() =&gt; onClick(questionid\\I want the input innerhtml here\\)}
    &gt;Create New Answer&lt;/button&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/OMDCP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OMDCP.png" alt="Table Here" /></a></p>
  <pre><code>The component that renders the table below.
  import React, { useState } from 'react';
  import { Button } from 'semantic-ui-react';
  import { currentloginid } from '../login/loginid.js';
  import { deletequestion } from '../question/deletequestion.js';
  import { createanswer } from '../answer/createanswer.js';
  import {deleteanswer } from '../answer/deleteanswer.js';
  
  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;
        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;CreateNewAnswerButton onClick={createanswer} /&gt;
            &lt;DeleteAnswerButton onClick={deleteanswer} /&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, setIdTobeDeleted, 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;
              {React.cloneElement(children[0], { questionid: row.questionid })}
            &lt;/td&gt;
            &lt;td&gt;
              {React.cloneElement(children[1], { questionid: row.questionid })}
            &lt;/td&gt;
            &lt;td&gt;
              {React.cloneElement(children[2], { questionid: row.questionid })}
            &lt;/td&gt;
            &lt;td&gt;{row.questionid}&lt;/td&gt;
          &lt;/tr&gt;
        ))}
      &lt;/tbody&gt;
    &lt;/table&gt;
  );
  
  const CreateNewAnswerButton = ({ questionid, onClick }) =&gt; (
    &lt;&gt;
    &lt;input id=&quot;newanswer&quot; placeholder=&quot;Create New Answer Here&quot;&gt;&lt;/input&gt;
    &lt;button
      className=&quot;ui negative basic button&quot;
      onClick={() =&gt; onClick(questionid)}
    &gt;Create New Answer&lt;/button&gt;
    &lt;/&gt;
  );
  
  const DeleteButton = ({ questionid, onClick }) =&gt; (
    &lt;button
      className=&quot;ui negative basic button&quot;
      onClick={() =&gt; onClick(questionid)}
    &gt;Delete Question&lt;/button&gt;
  );
  
  const DeleteAnswerButton = ({ questionid, onClick }) =&gt; (
    &lt;button
      className=&quot;ui negative basic button&quot;
      onClick={() =&gt; onClick(questionid)}
    &gt;Delete Answer&lt;/button&gt;
  );
  
  </code></pre>