title: Pass className,props,attributes from parent component to ALL child components without code duplication
body: <p>------------------------ React Parent Functional Component ------------------------</p>
  
  <pre><code>              &lt;div style={{ width: "100%", overflow: "scroll", border: "1px solid #ecf0f1", margin: "10px 0px 0px 10px" }}&gt;
                  &lt;svg id='wall' ref={wall} width="5000px" height="500px"&gt;
                    &lt;PanelSvgs initColor={classes.greywall} selectPanel={selectPanel} /&gt;
                  &lt;/svg&gt;
                &lt;/div&gt;
  
  </code></pre>
  
  <p>------------------------ React Child Functional Component ------------------------</p>
  
  <pre><code>function PanelSvgs(props) {
          return (
                  &lt;Fragment&gt;
                          &lt;polygon className={props.initColor} onClick={e =&gt; props.selectPanel(e)} bool="false" id="_x34_88_x2F_9" points="35.14,70.14 34.94,148.88 113.68,148.88 113.68,73.38"&gt;&lt;/polygon&gt;
                          &lt;polygon className={props.initColor} onClick={e =&gt; props.selectPanel(e)} bool="false" id="_x34_88_x2F_9" points="35.14,70.14 34.94,148.88 113.68,148.88 113.68,73.38"&gt;&lt;/polygon&gt;
                          &lt;rect className={props.initColor} onClick={e =&gt; props.selectPanel(e)} bool="false" id="_x36_01_x2F_12" x="34.94" y="148.88" width="78.74" height="78.74" &gt;&lt;/rect&gt;
                  &lt;/Fragment&gt;
  }
  export default PanelSvgs;
  </code></pre>
  
  <p>Hello everyone. As seen from the code snippets above. I have two react functional components, the parent and child.</p>
  
  <p>I would like to pass down the className, onClick function and an attribute to all the "polygon and rect" objects. As I have approximately 2000 objects, is there a way to pass these attributes down in a simplified way instead of duplicating them across all 2000 objects.?</p>
  
  <p>In Jquery and Javascript, it was relatively easy.</p>
  
  <pre><code>            const panels = document.getElementById('wall').children;
  
              // ADD onclick listener to children objects
              for (let p in panels) {
                  let panel = panels[p];
  
                  panel.onclick = () =&gt; {
                      selectPanel(panel);
                  }
              }
  </code></pre>