Does TSX suck?

component.tsx

import * as React from 'react';
import h = React.createElement;

export const TestComponentTSX: React.SFC<TestComponentProps> = (props) => {
  return <div className="col-md-3">
    { props.items.map((item, key) => <span key={key}>
      Item {key + 1}: {item.name}
    </span>) }
    <input />
    <button onClick={() => console.log('Clicked!')}>Create</button>
  </div>;
};

export const TestComponent: React.SFC<TestComponentProps> = (props) => {
  return h('div', {className: 'col-md-3'},
    props.items.map((item, key) => h('span', {key}, 
      `Item ${key + 1}: ${item.name}`)),
    h('input', {}),
    h('button', {className: 'btn btn-primary', onClick: () => console.log('Clicked!')},
      'Create'))
};

export type TestComponentProps = {
  items: {name: string}[];
};