title: Pass icon button as props using react
body: <p>I have a common grid component where I define the structure of the grid and also structure of a button bar that goes on top of the grid.</p>
  <p>Common-grid.js</p>
  <pre><code> &lt;Box height='100%' width='100%' position='absolute'&gt;
                  &lt;div className=&quot;common-grid&quot;&gt;
                      &lt;div className=&quot;button-bar&quot;&gt;
                      &lt;/div&gt; 
                  &lt;div className=&quot;ag-grid&quot;&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
      &lt;/Box&gt;
  </code></pre>
  <p>I pass data to the grid from my other component based to fill in the grid.
  MyComponent.js</p>
  <pre><code>{gridData.length &gt; 0 &amp;&amp; &lt;Grid tableData={gridData} columnData={activeListColumnDef} {...props}/&gt;}
  </code></pre>
  <p>Along with the data, I would also like to pass icon buttons that I would like to see in button bar.</p>
  <pre><code>&lt;IconButton
    icon={&lt;AddIcon /&gt;}
    onClick={onClickOpenActiveListEditor}
   /&gt;
   &lt;IconButton
    icon={&lt;EditIcon /&gt;}
   /&gt;
  </code></pre>
  <p>I do not want to define icon buttons in the common component but pass it as props. Is it possible to pass such html elements along with its event listeners as props?  Please help!</p>