refactoring for multisnek

soat.html

@@ -55,16 +55,16 @@
     />
 );
 
-const SVG = ({ circles }) => (
-    <svg>
+const Snake = ({ circles }) => (
+    <g>
       {
           circles.map((position, i) => <Circle key={i} position={position} index={i}/>)
       }
-    </svg>
+    </g>
 );
 
 
-class Snake extends React.Component {
+class Arena extends React.Component {
     constructor(props) {
         super(props);
         this.changeThing = this.changeThing.bind(this);
@@ -129,13 +129,15 @@
     render() {
         return (
             <div tabIndex="1" ref="playArea" onKeyDown={this.changeThing}>
-              <SVG circles={this.state.body} />
+              <svg>
+                <Snake circles={this.state.body} />
+              </svg>
             </div>
         );
     }
 }
 
-ReactDOM.render(<Snake />, document.getElementById("root"));
+ReactDOM.render(<Arena />, document.getElementById("root"));
 
 
 	</script>