title: Add Column and Rows in React onclick
body: <p>I am new to React JS and I want to add <code>onClick</code> event to my corner cells of the table. So, <code>onClick</code> I have to add column and row adjacent to the clicked cell.</p>
  <p><img src="https://i.stack.imgur.com/UGe9y.png" alt="Table schema" /></p>
  <p>My table initially consists of 4 column and row respectively. And on click of corner edges a column corresponding to it must be added.
  For example in the image above if I click on A the column and row will be added as shown. How can I do this ?
  </p>
  <pre><code>import { render } from &quot;@testing-library/react&quot;;
  import React, { useState, useRef } from &quot;react&quot;;
  import { Table } from &quot;react-bootstrap&quot;;
  
  var MyTable = () =&gt; {
    let [panel, setPanel] = useState([
      [&quot;S&quot;, &quot;O&quot;, &quot;L&quot;, &quot;A&quot;],
      [&quot;R&quot;, &quot;P&quot;, &quot;A&quot;, &quot;N&quot;],
      [&quot;E&quot;, &quot;L&quot;, &quot;S&quot;, &quot;O&quot;],
      [&quot;L&quot;, &quot;A&quot;, &quot;R&quot;, &quot;R&quot;],
    ]);
  
  
  
  
    function renderTable() {
      var rows = panel.map(function (item, i) {
        var entry = item.map(function (element, j) {
          return (
            &lt;td id={j}&gt;
              {element}
            &lt;/td&gt;
          );
        });
        return &lt;tr id={i}&gt;{entry}&lt;/tr&gt;;
      });
      return (
        &lt;Table&gt;
          &lt;tbody&gt;{rows}&lt;/tbody&gt;
        &lt;/Table&gt;
      );
    }
    return &lt;&gt;{renderTable()}&lt;/&gt;;
  };
  
  export default MyTable;
  </code></pre>
  <p>My code structure something like shown above.</p>