React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const animals = ["Cat", "Dog", "Rabbit"];
 
function AnimalButton(props) {

  function setRandomAnimal() {
    const animal = animals[Math.floor(Math.random() * 3)];
    props.onAnimalPicked(animal);
  }
  
  return (
    <button onClick={setRandomAnimal}>{props.caption}</button>
  );
}
 
class RandomAnimal extends React.Component {
  constructor() {
    super();
    this.state = { animals: [] };
    this.addAnimalToList = this.addAnimalToList.bind(this);
  }

  addAnimalToList(animal) {
    this.setState((prevState) => (
      { animals: prevState.animals.concat(animal) }
    ));
  }

  render() {
    const renderedAnimals = this.state.animals.map((animal, index) =>
      <li key={index}>{animal}</li>
    );

    return (
      <React.Fragment>
        <AnimalButton caption="Set Random Animal" onAnimalPicked={this.addAnimalToList}/>
        <ul>{ renderedAnimals }</ul>
      </React.Fragment>
    );
  }
}

ReactDOM.render(
  <RandomAnimal />,
  document.getElementById('container')
);