title: Trying to make a for loop to draw an SVG in React
body: <p>Trying to make a for loop to draw an SVG in react...</p>
  <p>I want to draw 4 circle in Svg by using loop</p>
  <pre><code>const circlex = 40;
    const circley = 40;
  
  &lt;svg&gt;
  &lt;foreignObject
            className={classes.threeDotIcon}
            y=&quot;30&quot; width=&quot;100&quot; height=&quot;100&quot;
          &gt;
            {
              [1, 2, 3, 4].map((data, index) =&gt; {
                &lt;svg width=&quot;100&quot; height=&quot;100&quot;&gt;
                  &lt;circle cx={circlex + 1} cy={circley + 1} r=&quot;30&quot; stroke=&quot;black&quot; fill=&quot;#caced5&quot; /&gt;
                &lt;/svg&gt;
              })
            }
          &lt;/foreignObject&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>I need When I Add Svg the circles auto draw in Svg....</p>