Как отрендерить [объект SVGSVGElement]

Question

Я использую функцию для создания родительского тега SVG, а затем на основе значений состояния создаю дочерние svg-компоненты 'circle'.

Когда компонент монтируется, я получаю следующую ошибку

Objects are not valid as a React child (found: [object SVGSVGElement]). If 
you meant to render a collection of children, use an array instead.

Вот функция

buildSVG = () => {
    const { overlays } = this.state;
    const NS = 'http://www.w3.org/2000/svg';
    const svgOverlay = document.createElementNS(NS, 'svg');
    svgOverlay.id = 'svg_overlays';
    svgOverlay.classList.add('overlay');

    Object.keys(overlays).forEach((el) => {
        const circle = document.createElementNS(NS, 'circle');
        circle.setAttribute('cx', overlays[el].cx);
        circle.setAttribute('cy', overlays[el].cy);
        circle.setAttribute('r', overlays[el].r);
        circle.setAttribute('fill', overlays[el].fill);
        svgOverlay.appendChild(circle);
    });
    return svgOverlay;
}

В идеале это отрисовывает svg и его дочерние элементы, в этом случае выдает ошибку.

Answer 1

buildSVG = () => {
    const { overlays } = this.state;
    const circleArray = [];
    Object.keys(overlays).forEach((el) => {
        const circle = (
            <circle
                key={overlays[el].cx + overlays[el].cy + overlays[el].fill}
                cx={overlays[el].cx}
                cy={overlays[el].cy}
                r={overlays[el].r}
                stroke={overlays[el].fill}
                strokeWidth="4"
                fill="blue"
            />
        );
        circleArray.push(circle);
    });
    return (
        <svg
            id="svg_overlays"
            className="overlay"
            onClick={this.handleClickOverlay}
            onDragOver={this.handleOverlayDragOver}
            onDrop={this.handleOverlayDrop}
        >
            {circleArray}
        </svg>
    );
}