React Base Fiddle (JSX)

Data to UI

by bhupendra negi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var Circle = React.createClass({

  render: function() {
    var circleStyle = {
      width: 100,
      height: 100,
      margin: 5,
      borderRadius: "50%",
      backgroundColor: this.props.color,
      display:"inline-block"
    };
    return ( < div style = {
        circleStyle
      }
      />
    )

  }

})

function showCircle() {
  var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363"];
  var ran = Math.floor(Math.random() * colors.length);
  // return a Circle with a randomly chosen color
  console.log(ran);
  return <Circle color = {
    colors[ran]
  }
  />;
};

var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363",               "#85FFC7", "#297373", "#FF8552", "#A40E4C"];
var renderData = [];
for (var i = 0; i < colors.length; i++) {  
// push jsx to array
  renderData.push( < Circle key={i + colors[i]}  color = {
        colors[i]
     }
  />);}
  console.log(renderData);

      ReactDOM.render( < div > {
          renderData
        } < /div>,
        document.querySelector("#container"));