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);
                }
            }

Is it 2000 child components, all either polygon or rect, in a Fragment, that you simply want to always pass the same props to? Are they in some structure like an array that can be mapped? How are put in code? — Drew Reese
@DrewReese Yeah. I get what you mean, that can be done easily. ` {childrenData.map(child => ( <Child key={child.childNumber} text={child.childText} onClick={e => {} /> ))}` But the backend people are lazy to turn the polygon or rect into an array/object. They are intending to keep these files in blob storage and send them to the front-end directly upon the API call — marvin lee jing rui
What is childrenData? can you post that? There are ways of working with react components that are in different structures: creating new, cloning, etc.. but without the details of the structure of the data you're working with it's not easy to answer. Hence why I asked how it is getting to your UI code. — Drew Reese
There's no childrenData for now. I have to deal with the RAW svg below. <svg id='wall' ref={wall} width="5000px" height="500px"> <polygon className={props.initColor} onClick={e => props.selectPanel(e)} bool="false"></polygon> <rect className={props.initColor} onClick={e => props.selectPanel(e)} bool="false" ></rect> ............. </svg> Currently, I used a useRef on the <svg> and get the wall.current.children components. But i have to manually key and assign the props to all the child components. which is a hassle. I want to do this dynamically. — marvin lee jing rui
@DrewReese thanks from the prompt reply btw! It's kind of irritating using React. The old ways of Jquery is so much more convenient. — marvin lee jing rui

Drew Reese Drew Reese · Accepted Answer · 2020-03-18T07:31:33

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.

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

1 Answers