class PreviewArea extends React.Component {
  constructor(props) {
    super(props)
  }
   
  // propsはrenderの引数では渡されないので、クラスのインスタンス変数的にthisを使ってアクセス
  render() {
    const convertedText = marked(this.props.input, 
                                  { breaks: true })
    // ReactのdangerouslySetInnerHTMLを利用
    // Ref. https://ja.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
    return (
      <div id="previewWrapper">
        <h2 class='component'>Preview Markdown</h2>
        <div id='preview' dangerouslySetInnerHTML={{
        __html: convertedText
      }}>
        </div>
      </div>
    )
  }
}


class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { input: placeholder }
    this.handleChange = this.handleChange.bind(this)
  }

   // 入力フィールドのイベントは引数として渡される
   // この値をsetStateに利用する
   handleChange(event) {
     this.setState({
       input: event.target.value
     })
   }

  render() {
    return(
      <div id='container'>
        <h2 class='component'>Input Markdown Text</h2>
        <textarea id='editor' onChange={ this.handleChange }>
          {this.state.input}
        </textarea>
        <PreviewArea input={ this.state.input } />
      </div>
    )
  } 
}

const placeholder = 
`# Welcome to my React Markdown Previewer!

## This is a sub-heading...
### And here's some other cool stuff:
  
Heres some code, \`<div></div>\`, between 2 backticks.

\`\`\`
// this is multi-line code:

function anotherExample(firstLine, lastLine) {
  if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
    return multiLineCode;
  }
}
\`\`\`
  
You can also make text **bold**... whoa!
Or _italic_.
Or... wait for it... **_both!_**
And feel free to go crazy ~~crossing stuff out~~.

There's also [links](https://www.freecodecamp.com), and
> Block Quotes!

And if you want to get really crazy, even tables:

Wild Header | Crazy Header | Another Header?
------------ | ------------- | ------------- 
Your content can | be here, and it | can be here....
And here. | Okay. | I think we get it.

- And of course there are lists.
  - Some are bulleted.
     - With different indentation levels.
        - That look like this.


1. And there are numbererd lists too.
1. Use just 1s if you want! 
1. But the list goes on...
- Even if you use dashes or asterisks.
* And last but not least, let's not forget embedded images:

![React Logo w/ Text](https://goo.gl/Umyytc)
`

ReactDOM.render(<App />, document.getElementById('app'))