How can I place text inside an SVG circle with React JS?

Question

I have the following code:

import React from 'react';

var SVGComponent = React.createClass({
    render: function() {
        return <svg {...this.props}>{this.props.children}</svg>;
    }
});

var Circle = React.createClass({
    render: function() {
        return <circle {...this.props}>{this.props.children}</circle>;
    }
});

var MakeCircles = React.createClass({

    render: function () {
        return(
            <div>
                <SVGComponent height="110" width="500">
                    <Circle 
                        cx="50" cy="55" r="45"
                        fill="none"
                        stroke="#F0CE01" strokeWidth="4" />     
                </SVGComponent>
            </div>
        );
    }
});
export default MakeCircles

I'm trying to get some text inside the circle but finding it absolutely difficult. Is there something/some add-on that can help me with this?

Solution

A circle is a layer, and so is a Text node. You have to have them as separate layers and make them look as if they belong together:

<SVGComponent height="110" width="500">
    <Circle cx="50" cy="55" r="45" fill="none" stroke="#F0CE01" strokeWidth="4" />
    <text textAnchor="middle" x="250" y="55">Circle Text</text>
</SVGComponent>

Comments

[ArneHugo]

Tiny thing: text-anchor should be textAnchor in React.

[harshikerfuffle]

this didn't work for me.. only the text renders <div height="110" width="500"> <circle cx="50" cy="55" r="45" fill="none" stroke="#F0CE01" strokeWidth="4" /> <text textAnchor="middle" x="250" y="55"> Circle Text</text> </div>