title: Get Dynamically created table Data in React Row
body: <p>I am more familiar with NodeJs  than  react. I have build a react component that searches for user input and provides the output in a table format based on the value that the user has typed into the search input form. This is working as I want and the code for the module is below:</p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  import Suggestions from './Suggestions';
  
  // API url
  const API_URL = 'http://localhost:3000/api/file_infos'
  
  class Search extends Component {
    state = {
      query: '',
      results: []
    }
    getCount = () =&gt; {
      axios.get(`${API_URL}count?filter[where][id][regexp]=/${this.state.query}/i`)
        .then(count =&gt; {
          this.setState({
            results: count.data
          })
        })
    }
  
    // query loop back API for matching queries base on text input
    getInfo = () =&gt; {
      axios.get(`${API_URL}?filter[where][id][regexp]=/${this.state.query}/i&amp;filter[limit]=20`)
        .then(response =&gt; {
          this.setState({
            results: response.data
          })
        })
    }
    // check to see if input on the search bar has changed and update the search query accordingly 
    handleInputChange = () =&gt; {
      this.setState({
        query: this.search.value
      }, () =&gt; {
        if (this.state.query &amp;&amp; this.state.query.length &gt; 1) {
          if (this.state.query) {
            this.getInfo()
          }
        } else if (!this.state.query) {
        }
      })
    }
    // render form and pass results back to the home component 
    render() {
      return (
        &lt;div&gt;
        &lt;form&gt;
          &lt;input
            placeholder="Search for..."
            ref={input =&gt; this.search = input}
            onChange={this.handleInputChange}
          /&gt;
  
        &lt;/form&gt;
  
        &lt;Suggestions results={this.state.results} /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Search
  </code></pre>
  
  <p>The second module is the suggestions module that displays the output in the table format. </p>
  
  <p>The next portion of the app I am building will open a file based on the table row that the user selected. I want that table data returned to a function so that I can make an http post request to my API that will in turn open the file using a NodeJS module. </p>
  
  <p>I want the suggestions component to return the value of the data items in the table cells so that the data can be used to send to the API in order to open my files. The code I have come up with so far is only returning an undefined error. </p>
  
  <p>Below is what I currently have:</p>
  
  <pre><code>import React from 'react';
  // return results in a table format based on the text input entered 
   const Suggestions = (props) =&gt; {
  
     const state = {
          results: []
      }
  
      const handleFormOpen = () =&gt; {
          this.setState({
              results: this.results.value
          },
          console.log(this.state.results)
          )
      }
  
      const options = props.results.map(r =&gt; (
          &lt;tr key={r.id} ref={tr =&gt; this.results = tr} onClick={handleFormOpen.bind(this)}&gt;
              &lt;td&gt;{r.id}&lt;/td&gt;
              &lt;td&gt;{r.OriginalPath}&lt;/td&gt;
              &lt;td&gt;{r.CreateDate}&lt;/td&gt;
              &lt;td&gt;{r.AccessDate}&lt;/td&gt;
              &lt;td&gt;{r.WriteDate}&lt;/td&gt;
              &lt;td&gt;&lt;i className="fas fa-book-open"&gt;&lt;/i&gt;&lt;/td&gt;
          &lt;/tr&gt;
      ))
      return &lt;table className="striped responsive-table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;File Name&lt;/th&gt;
                  &lt;th&gt;Parent Directory&lt;/th&gt;
                  &lt;th&gt;Creation Date&lt;/th&gt;
                  &lt;th&gt;Access Date&lt;/th&gt;
                  &lt;th&gt;Write Date&lt;/th&gt;
                  &lt;th&gt;Open File&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              {options}
          &lt;/tbody&gt;
      &lt;/table&gt;
  }
  
  export default Suggestions;
  </code></pre>
  
  <p>I am really unsure at this point if I am trying to tackle this issue in the correct way. I am thinking that maybe the suggestions component may need to be turned into a full class extending component but I am fairly lost at this point. Can someone please kindly point out my folly and get me going in the right direction?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>As requested in the comments here is the error log from my browser:</p>
  
  <pre class="lang-none prettyprint-override"><code>Suggestions.js:10 Uncaught TypeError: Cannot read property 'results' of undefined
      at Object.handleFormOpen (Suggestions.js:10)
      at HTMLUnknownElement.callCallback (react-dom.development.js:145)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
      at invokeGuardedCallback (react-dom.development.js:248)
      at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:262)
      at executeDispatch (react-dom.development.js:593)
      at executeDispatchesInOrder (react-dom.development.js:615)
      at executeDispatchesAndRelease (react-dom.development.js:713)
      at executeDispatchesAndReleaseTopLevel (react-dom.development.js:724)
      at forEachAccumulated (react-dom.development.js:694)
      at runEventsInBatch (react-dom.development.js:855)
      at runExtractedEventsInBatch (react-dom.development.js:864)
      at handleTopLevel (react-dom.development.js:4857)
      at batchedUpdates$1 (react-dom.development.js:17498)
      at batchedUpdates (react-dom.development.js:2189)
      at dispatchEvent (react-dom.development.js:4936)
      at interactiveUpdates$1 (react-dom.development.js:17553)
      at interactiveUpdates (react-dom.development.js:2208)
      at dispatchInteractiveEvent (react-dom.development.js:4913)
  </code></pre>