title: JavaScript using script in React.js
body: <p>I have a script Written in JavaScript, it draws some circles and lines that have some loops in it as an SVG. I want to use it in React.js but it is producing some errors that I don't know how to fix.</p>
  <pre><code>var svgns = &quot;http://www.w3.org/2000/svg&quot;;
  var radius = 400;
  text_r = 430;
  var point_size = 10;
  var center_x = 500;
  var center_y = 500;
  
  function GraphCirclePoint(step, gappoint, nodlist) {
      var indexgappoint = 0;
      var indexnodelist = 0;
      for (var point = 0; point &lt; 360; point += step) {
          if (gappoint[indexgappoint][0] != point) {
  
              if (nodlist[indexnodelist][0] == point) {
                  drawPoint(point, 1, nodlist[indexnodelist][1], nodlist[indexnodelist][2]);
                  indexnodelist++;
                  if (indexnodelist &gt;= nodlist.length)
                      indexnodelist--;
              } else {
  
                  drawPoint(point, 1, &quot;reserved&quot;);
              }
          } else if (indexgappoint &lt; gappoint.length) {
  
              point = gappoint[indexgappoint][1];
              indexgappoint++;
              if (indexgappoint &gt;= gappoint.length)
                  indexgappoint--;
          }
      }
  }
  
  function GraphCircleLine(listline) {
      for (var i = 0; i &lt; listline.length; i++) {
          var child = listline[i][6];
          if (child.length &gt; 0) {
              for (var j = 0; j &lt; child.length; j++) {
                  var x = child[j];
                  drawline(listline[i][2], listline[x][2], listline[i][3], listline[i][4]);
                  tagHover('.' + listline[i][2], '.' + listline[i][4], listline[i][3]);
              }
          }
      }
  }
  
  function drawPoint(angle, distance, label, ID) {
      var x = center_x + radius * Math.cos(-angle * Math.PI / 180) * distance;
      var y = center_y + radius * Math.sin(-angle * Math.PI / 180) * distance;
  
      var xx = center_x + text_r * Math.cos(-angle * Math.PI / 180) * distance;
      var yy = center_y + text_r * Math.sin(-angle * Math.PI / 180) * distance;
  
      var circle = document.createElementNS(svgns, 'circle');
      circle.setAttributeNS(null, 'cx', x);
      circle.setAttributeNS(null, 'cy', y);
      circle.setAttributeNS(null, 'r', 5);
      circle.setAttribute(&quot;id&quot;, ID);
      circle.setAttribute(&quot;fill&quot;, &quot;white&quot;);
  
      var line = document.createElementNS(svgns, &quot;path&quot;);
      line.setAttribute(&quot;d&quot;, &quot;M&quot; + x + &quot; &quot; + y + &quot;L&quot; + &quot;500 500&quot;);
      line.setAttribute(&quot;stroke&quot;, &quot;white&quot;);
      line.setAttribute(&quot;stroke-width&quot;, 0.5);
  
      var text = document.createElementNS(svgns, &quot;text&quot;);
      text.setAttributeNS(null, 'x', xx);
      text.setAttributeNS(null, 'y', yy);
  
      $(text).attr({
          &quot;font-size&quot;: 20,
          &quot;class&quot;: label,
          &quot;fill&quot;: &quot;white&quot;,
          &quot;text-anchor&quot;: &quot;start&quot;
      });
      text.innerHTML = label;
  
  
      text.setAttribute(&quot;transform&quot;, &quot; rotate(&quot; + (Math.abs(angle) * -1) + &quot;,&quot; + xx + &quot;,&quot; + yy + &quot;)&quot;);
      if (angle &gt;= 125 &amp;&amp; angle &lt;= 235) {
          //text.setAttribute(&quot;text-anchor&quot;, &quot;end&quot;);
      }
  
      document.getElementById(&quot;text&quot;).appendChild(text);
      document.getElementById(&quot;ttt&quot;).appendChild(circle);
      document.getElementById(&quot;ttt&quot;).appendChild(line);
  }
  
  function drawline(point1, point2, color, clsn) {
      var line = document.createElementNS(svgns, &quot;path&quot;)
      var pointx1 = document.getElementById(point1).getAttribute(&quot;cx&quot;);
      var pointy1 = document.getElementById(point1).getAttribute(&quot;cy&quot;);
      var pointx2 = document.getElementById(point2).getAttribute(&quot;cx&quot;);
      var pointy2 = document.getElementById(point2).getAttribute(&quot;cy&quot;);
      document.getElementById(point1).setAttribute(&quot;fill&quot;, &quot;crimson&quot;)
      document.getElementById(point2).setAttribute(&quot;fill&quot;, &quot;crimson&quot;);
      document.getElementById(point1).setAttribute(&quot;class&quot;, &quot;cnct&quot;)
      document.getElementById(point2).setAttribute(&quot;class&quot;, &quot;cnct&quot;);
  
      var Wline2 = document.createElementNS(svgns, &quot;path&quot;);
      Wline2.setAttribute(&quot;d&quot;, &quot;M&quot; + pointx2 + &quot; &quot; + pointy2 + &quot;L&quot; + &quot;500 500&quot;)
  
      Wline2.setAttribute(&quot;stroke&quot;, &quot;white&quot;)
      Wline2.setAttribute(&quot;stroke-width&quot;, 0.1)
      Wline2.setAttribute(&quot;class&quot;, &quot;whiteline&quot;)
  
      var Wline1 = document.createElementNS(svgns, &quot;path&quot;);
      Wline1.setAttribute(&quot;d&quot;, &quot;M&quot; + pointx1 + &quot; &quot; + pointy1 + &quot;L&quot; + &quot;500 500&quot;)
  
      Wline1.setAttribute(&quot;stroke&quot;, &quot;white&quot;)
      Wline1.setAttribute(&quot;class&quot;, &quot;whiteline&quot;)
      Wline1.setAttribute(&quot;stroke-width&quot;, 0.1)
  
      line.setAttribute(&quot;d&quot;, &quot;M&quot; + pointx1 + &quot;,&quot; + pointy1 + &quot; &quot; + &quot;S&quot; + &quot;400&quot; + &quot; &quot; + &quot;400 &quot; + pointx2 + &quot; &quot; + pointy2)
      line.setAttribute(&quot;stroke&quot;, color)
      line.setAttribute(&quot;fill&quot;, &quot;none&quot;)
      line.setAttribute(&quot;stroke-width&quot;, 0.6)
      line.setAttribute(&quot;class&quot;, clsn)
      document.getElementById(&quot;lines&quot;).appendChild(line);
  
      document.getElementById(&quot;ttt&quot;).appendChild(Wline2);
      document.getElementById(&quot;ttt&quot;).appendChild(Wline1);
  }
  
  function tagHover(tagclass, id, color) {
      $(tagclass).hover(function() {
          $(id).css(&quot;stroke&quot;, color)
          $(id).css(&quot;stroke-width&quot;, 6)
      }, function() {
          $(id).css(&quot;stroke&quot;, color);
          $(id).css(&quot;stroke-width&quot;, 0.6)
      });
  }
  
  function logonode() {
      var GRCC = document.createElementNS(svgns, 'text');
      GRCC.setAttribute(&quot;x&quot;, 500);
      GRCC.setAttribute(&quot;y&quot;, 500);
      GRCC.setAttribute(&quot;x&quot;, 500);
      GRCC.setAttribute(&quot;text-anchor&quot;, &quot;middle&quot;);
      GRCC.setAttribute(&quot;id&quot;, &quot;GRCC&quot;);
      GRCC.innerHTML = &quot;GRCC&quot;;
      document.getElementById(&quot;ttt&quot;).appendChild(GRCC);
      $(&quot;#GRCC &quot;).hover(function() {
          $(&quot;.whiteline&quot;).css(&quot;stroke-width&quot;, 1.5)
  
      }, function() {
          $(&quot;.whiteline&quot;).css(&quot;stroke-width&quot;, 0.1)
  
      });
  }
  
  var GapPointList = [
      [5, 20],
      [30, 30],
      [40, 40],
      [50, 60],
      [110, 120],
      [210, 220],
      [240, 250],
      [285, 310]
  ];
  var Nodlist = [
      //array of data
  ];
  
  GraphCirclePoint(5, GapPointList, Nodlist);
  GraphCircleLine(Nodlist);
  
  logonode();
  </code></pre>
  <p><strong>My HTML:</strong></p>
  <pre><code>body style=&quot;background-color: 07101e;&quot;&gt;
  &lt;svg height=&quot;700&quot; width=&quot;800&quot; viewBox=&quot;0 -80 1200 1200&quot; id=&quot;ttt&quot; style=&quot;display: block;margin: auto &quot;&gt;   
  &lt;g id=&quot;white_lines&quot;&gt;&lt;/g&gt;
  &lt;g id=&quot;lines&quot;&gt;&lt;/g&gt;
  &lt;g id=&quot;text&quot;&gt;&lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>i get errors <em>(Unexpected string concatenation of literals)</em> in React every time I want to use <code>setAttribute</code> using a variable. and also i get (Cannot read properties of null (reading 'appendChild') ) Error</p>