title: How to pass data from a table row and pass it to another component when it renders?
body: <p>I have a component that shows a table and one of its columns have a field <code>Actions</code> which has buttons (view, edit, delete etc.). On button click, I need to render another component (component is a popup) and pass the data from the table so that it displays the data in some form which I need to further add.</p>
  <p>I have managed to get the current data from its row by passing in onClick. I tried to use state for another component to render but it didn't work out. I'm using Semantic-UI React components to display the button with animations.</p>
  <p>Here is the code that has the table,</p>
  <pre class="lang-js prettyprint-override"><code>const MainContent = () =&gt; {
    const [actions, setActions] = useState(false);
   
    const handleView = (rowData) =&gt; {
      console.log(rowData);
      setActions(true);
      if (actions == true) return &lt;ParentView /&gt;;
    };
  
    ....
    ....
  
    const contents = (item, index) =&gt; {
      return item.routeChildEntry ? (
        &lt;&gt;
          &lt;tr key={index}&gt;
            &lt;td&gt;{item.appName}&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;{item.createdTs}&lt;/td&gt;
            &lt;td&gt;{item.pattern}&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;
              &lt;Button animated onClick={() =&gt; handleView(item)}&gt;
                &lt;Button.Content visible&gt;View&lt;/Button.Content&gt;
                &lt;Button.Content hidden&gt;
                  &lt;Icon name=&quot;eye&quot; /&gt;
                &lt;/Button.Content&gt;
              &lt;/Button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          {item.routeChildEntry.map(routeContents)}
        &lt;/&gt;
      ) : (
        ....
        ....
        ....
      );
    };
  
    return (
      &lt;div&gt;
       
        ....
                    {loading ? (
                      &lt;div className=&quot;table-responsive&quot;&gt;
                        &lt;table className=&quot;table&quot;&gt;
                          &lt;thead&gt;
                            &lt;tr&gt;
                              &lt;th&gt;AppName&lt;/th&gt;
                              &lt;th&gt;Parent_App&lt;/th&gt;
                              &lt;th&gt;Created_Date&lt;/th&gt;
                              &lt;th&gt;Req_Path&lt;/th&gt;
                              &lt;th&gt;Resp_Code&lt;/th&gt;
                              &lt;th&gt;Resp_Content_Type&lt;/th&gt;
                              &lt;th&gt;Resp_Delay&lt;/th&gt;
                              &lt;th&gt;Action&lt;/th&gt;
                            &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                            {data.map((routes, index) =&gt; {
                              return routes.map(contents, index);
                            })}
                          &lt;/tbody&gt;
                        &lt;/table&gt;
                      &lt;/div&gt;
                    ) : (
                      ....
                      ....
                    )}
                  &lt;/form&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default MainContent;
  
  </code></pre>
  <p>Below is the component to render on button click,</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import Popup from &quot;reactjs-popup&quot;;
  import { Icon } from &quot;semantic-ui-react&quot;;
  
  const Parent = (props) =&gt; {
    return (
      &lt;Popup trigger={&lt;Icon link name=&quot;eye&quot; /&gt;} modal closeOnDocumentClick&gt;
        &lt;h4&gt;in parent&lt;/h4&gt;
      &lt;/Popup&gt;
    );
  };
  
  export default Parent;
  </code></pre>
  <p>How can I render the other component and pass data to it on button click?</p>