React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

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="container1">
  <!-- This element's contents will be replaced with your component. -->
</div>
<div id="container2">
  <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

const Child = ({
  onClick, 
  text
}) => (
  <button onClick={onClick}>
  	{text}
  </button>
)


class Parent1 extends React.Component {
  handleChildClick(childData,event) {
     alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
     alert("The Child HTML is: " + event.target.outerHTML);
  }
  render() {
    return (
      <div>
        {this.props.childrenData.map(child => (
          <Child
            key={child.childNumber}
            text={child.childText} 
            onClick={e => this.handleChildClick(child,e)}
          />
        ))}
      </div>
    );
  }
}


const Parent2 = ({childrenData}) => (
  <div>
     {childrenData.map(child => (
       <Child
         key={child.childNumber}
         text={child.childText} 
         onClick={e => {
            alert("The Child button data is: " + child.childText + " - " + child.childNumber);
     				alert("The Child HTML is: " + e.target.outerHTML);
         }}
       />
     ))}
  </div>
)




const State = [
  {childText: "Click me 1!", childNumber: 1},
  {childText: "Click me 2!", childNumber: 2}
];

ReactDOM.render(
  <Parent1 childrenData={State}/>,
  document.getElementById('container1')
);
ReactDOM.render(
  <Parent2 childrenData={State}/>,
  document.getElementById('container2')
);