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

var destination = document.querySelector("#container");

class TodoItems extends React.Component {

  render() {
    var todoEntries = this.props.entries;
    var listItems = [];

    for (var i = 0; i < todoEntries.length; i++) {
      var entry = todoEntries[i];
      listItems.push(<li key={"item" + i}>
        <a href={entry.link}>{entry.item}</a>: {entry.description}
      </li>);
    }

    return (
      <ul className="theList">
        {listItems}
      </ul>
    );
  }
};

class TodoList extends React.Component {

  state = {
    items: [],
    item: "",
    description: "",
    link: ""
  };
  
  updateValue = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    });
  }
  
  addItem = (e) => {
    var itemArray = this.state.items;
    itemArray.push({
      item: this.state.item,
      description: this.state.description,
      link: this.state.link
    });

    this.setState({
      items: itemArray,
      item: "",
      description: "",
      link: ""
    });
  }
  
  render() {
    return (
      <div className="todoListMain">
        <div className="header"
          onChange={this.updateValue}>
          <input id="item" placeholder="item" value={this.state.item}/>
          <input id="description" placeholder="description" value={this.state.description}/>
          <input id="link" placeholder="link" value={this.state.link}/>
          <button onClick={this.addItem}>add</button>
        </div>
        <TodoItems entries={this.state.items}/>
      </div>
    );
  }
};

ReactDOM.render((
  <div>
    <TodoList/>
  </div>
), destination);