title: Dynamically building a render function in React
body: <p>I have a render function as below. I am taking an open-source library from our current site and building it into react, and it creates a colour picker (when we get it working), <a href="http://www.booneputney.com/jquery-hex-colorpicker.html" rel="nofollow noreferrer">http://www.booneputney.com/jquery-hex-colorpicker.html</a> Demo 1.  We wish to continue using this as it's a nice simple colour picker.</p>
  <p>The only issue I am trying to move the dynamic building of the picker into the render() function.  I'm reasonably new to React, and I've searched high and low for an answer... but it renders the tags and so on like so in the browser.</p>
  <pre><code>undefined&lt;/div&gt;&lt;div className = &quot;picker-sidebar&quot;&gt;
  &lt;/div&gt;&lt;div className = &quot;picker-form-wrapper&quot;&gt;&lt;form className = &quot;picker-form&quot; onsubmit=
  {this.submitColorChoice}&gt;&lt;input type=&quot;text&quot; name=&quot;selected-color&quot; className = 
  &quot;selected-color&quot; readonly=&quot;readonly&quot;/&gt;&lt;input type=&quot;submit&quot; value=&quot;OK&quot; name=&quot;submit&quot; 
  className = &quot;submit&quot;/&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  <p>Any solutions?</p>
  <p>Thank you for your help.</p>
  <pre><code>    render() {
          let output;
          {
  
  
              for (let row = 0; row &lt; this.state.settings.maxBlocks; row++) {
                  let blocksCount = this.state.settings.size + row;
                  if (row &gt;= this.state.settings.size) {
                      blocksCount = this.state.settings.size * 2 - (row - this.state.settings.size + 2);
                  }
                  output += &quot;&lt;div className = 'picker-row'&gt;&quot;;
                  for (let block = 0; block &lt; blocksCount; block++) {
                      let y = centerBlock - row;
                      let x = -centerBlock + (block + (this.state.settings.maxBlocks - blocksCount) / 2);
                      let radius = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
                      let normRadius = radius / maxRadius;
                      angle = Math.atan(y / x) * 180 / Math.PI + 90;
                      if (x &gt;= 0) {
                          angle += 180;//compensate for right 2 quadrants
                      }
                      if (settings.colorModel === &quot;hsv&quot;) {
                          valueLightness = 1;
                      } else {
                          valueLightness = 0.5;
                      }
                      if (normRadius === 0) {
                          angle = 0;
                      }//force angle to prevent undefined
                      output += &quot;&lt;div className = 'color-block' style='background-color:&quot; + this.colorizeBlock(normRadius, angle, valueLightness) + &quot;'&gt;&lt;/div&gt;&quot;;
                  }
                  output += &quot;&lt;/div&gt;&quot;;
              }
              output += &quot;&lt;/div&gt;&quot;;
              output += '&lt;div className = &quot;picker-sidebar&quot;&gt;';
              for (let row = 0; row &lt; this.state.settings.maxBlocks; row++) {
                  output += &quot;&lt;div className = 'color-block'&gt;&lt;/div&gt;&quot;;
              }
              output += '&lt;/div&gt;';
              output += '&lt;div className = &quot;picker-form-wrapper&quot;&gt;&lt;form className = &quot;picker-form&quot; onsubmit={this.submitColorChoice}&gt;' +
                  '&lt;input type=&quot;text&quot; name=&quot;selected-color&quot; className = &quot;selected-color&quot; readonly=&quot;readonly&quot;/&gt;' +
                  '&lt;input type=&quot;submit&quot; value=&quot;OK&quot; name=&quot;submit&quot; className = &quot;submit&quot;/&gt;' +
                  '&lt;/form&gt;&lt;/div&gt;';
              output += &quot;&lt;/div&gt;&quot;;//end of hex-color-picker-wrapper
          }
          const colourPicker = &lt;React.Fragment&gt;{output}&lt;/React.Fragment&gt;
          return (colourPicker)
      }
  </code></pre>