title: How can I place text inside an SVG circle with React JS?
body: <p>I have the following code:</p>
  
  <pre><code>import React from 'react';
  
  var SVGComponent = React.createClass({
      render: function() {
          return &lt;svg {...this.props}&gt;{this.props.children}&lt;/svg&gt;;
      }
  });
  
  var Circle = React.createClass({
      render: function() {
          return &lt;circle {...this.props}&gt;{this.props.children}&lt;/circle&gt;;
      }
  });
  
  var MakeCircles = React.createClass({
  
      render: function () {
          return(
              &lt;div&gt;
                  &lt;SVGComponent height="110" width="500"&gt;
                      &lt;Circle 
                          cx="50" cy="55" r="45"
                          fill="none"
                          stroke="#F0CE01" strokeWidth="4" /&gt;     
                  &lt;/SVGComponent&gt;
              &lt;/div&gt;
          );
      }
  });
  export default MakeCircles
  </code></pre>
  
  <p>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?</p>