Pass className,props,attributes from parent component to ALL child components without code duplication

Question

------------------------ React Parent Functional Component ------------------------

              <div style={{ width: "100%", overflow: "scroll", border: "1px solid #ecf0f1", margin: "10px 0px 0px 10px" }}>
                <svg id='wall' ref={wall} width="5000px" height="500px">
                  <PanelSvgs initColor={classes.greywall} selectPanel={selectPanel} />
                </svg>
              </div>

------------------------ React Child Functional Component ------------------------

function PanelSvgs(props) {
        return (
                <Fragment>
                        <polygon className={props.initColor} onClick={e => 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"></polygon>
                        <polygon className={props.initColor} onClick={e => 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"></polygon>
                        <rect className={props.initColor} onClick={e => props.selectPanel(e)} bool="false" id="_x36_01_x2F_12" x="34.94" y="148.88" width="78.74" height="78.74" ></rect>
                </Fragment>
}
export default PanelSvgs;

Hello everyone. As seen from the code snippets above. I have two react functional components, the parent and child.

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.?

In Jquery and Javascript, it was relatively easy.

            const panels = document.getElementById('wall').children;

            // ADD onclick listener to children objects
            for (let p in panels) {
                let panel = panels[p];

                panel.onclick = () => {
                    selectPanel(panel);
                }
            }

Answer 1

Would cloneElement work for you?

Clone and return a new React element using element as the starting point. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. key and ref from the original element will be preserved.

React.cloneElement() is almost equivalent to:

<element.type {...element.props} {...props}>{children}</element.type>

Something like:

import React, { cloneElement} from 'react';

...

const elementProps = {
  className: props.initColor,
  onClick: props.selectPanel,
  bool: "false"
  id: "_x34_88_x2F_9"
  points: "35.14,70.14 34.94,148.88 113.68,148.88 113.68,73.38"
};

wall.current.children.map(element => cloneElement(element, elementProps));

This OFC, assumes you can get your data elements into an array form in order to iterate over them.