SVG <rect> Ready For Prime Time

Includes the following on the SVG rect element: class, super, state, and key This may be applied to dynamic control of the element. See: State and Lifecycle


React Root SVG Source:

Babel Script (code):
  1.     var randColor = function() //---create random colors---
  2.     {
  3.         return '#'+Math.floor(Math.random()*16777215).toString(16);
  4.     }
  5.  
  6.     const svgRoot=ReactDOM.render(<svg className="svg-root" id="mySVG" overflow="visible" xmlns="http://www.w3.org/2000/svg" />, svgDiv);
  7.  
  8.     //---initialize the component---
  9.     class RectSVG extends React.Component {
  10.         render()
  11.         {
  12.             return (
  13.             <rect className="rect-svg"  x={this.props.x} y={this.props.y} width={this.props.width} height={this.props.height} fill={this.props.fill} />
  14.             );
  15.         }
  16.     }
  17.  
  18.     //==== add super state: props = state=================
  19.     class Rect extends React.Component
  20.     {
  21.         constructor()
  22.         {
  23.             super();
  24.             this.state =
  25.             {
  26.                 x: null,
  27.                 y: null,
  28.                 width: null,
  29.                 height: null,
  30.                 fill: null
  31.             };
  32.         }
  33.  
  34.         render()
  35.         {
  36.             return (
  37.                 <rect className="rect-svg"  x={this.state.x} y={this.state.y} width={this.state.width} height={this.state.height} fill={this.state.fill} />
  38.             );
  39.         }
  40.     }
  41.  
  42.     //---place rects in <g> container---
  43.     ReactDOM.render(        //---include key---
  44.         <g>
  45.             <RectSVG className="rect-svg" key={"rect0"} x={0} y={0} width={100} height={100} fill={randColor()} />
  46.             <RectSVG className="rect-svg" key={"rect1"} x={100} y={0} width={100} height={100} fill={randColor()} />
  47.             <RectSVG className="rect-svg" key={"rect2"} x={200} y={0} width={100} height={100} fill={randColor()} />
  48.             <RectSVG className="rect-svg" key={"rect3"} x={300} y={0} width={100} height={100} fill={randColor()} />
  49.             <RectSVG className="rect-svg" key={"rect4"} x={400} y={0} width={100} height={100} fill={randColor()} />
  50.             <RectSVG className="rect-svg" key={"rect5"} x={500} y={0} width={100} height={100} fill={randColor()} />
  51.         </g>
  52.         ,mySVG
  53.     )
  54.  
  55.     //---Animate: change fill each ms---
  56.     var colorInterval=setInterval(changeColors,1000)
  57.  
  58.     function changeColors()
  59.     {
  60.  
  61.         ReactDOM.render(
  62.             <g>
  63.                 <RectSVG className="rect-svg" key={"rect0"} x={0} y={0} width={100} height={100} fill={randColor()} />
  64.                 <RectSVG className="rect-svg" key={"rect1"} x={100} y={0} width={100} height={100} fill={randColor()} />
  65.                 <RectSVG className="rect-svg" key={"rect2"} x={200} y={0} width={100} height={100} fill={randColor()} />
  66.                 <RectSVG className="rect-svg" key={"rect3"} x={300} y={0} width={100} height={100} fill={randColor()} />
  67.                 <RectSVG className="rect-svg" key={"rect4"} x={400} y={0} width={100} height={100} fill={randColor()} />
  68.                 <RectSVG className="rect-svg" key={"rect5"} x={500} y={0} width={100} height={100} fill={randColor()} />
  69.             </g>
  70.  
  71.         ,svgRoot
  72.         );
  73.  
  74.         //---local function to show svg source on page: React Root SVG Source---
  75.         showSourceSVG()
  76.  
  77.     }