Debug JavaScript objects in TypeScript React

pre.tsx

export const Pre: React.SFC<{ children: any }> = (props) => {
  return <pre>{JSON.stringify(props.children, null, 2)}</pre>
}

usage.tsx

import {Pre} from './pre';

// in some render 
render() {
  return <Pre>{{example: 123}}</Pre>
}