Rails API + Markdown

Editor.js

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import marked from 'marked';

const postContent = (content,md)=>{
  axios({
    method: "patch",
    url:`/api/v1/${window.MDconfig.url}/${window.MDconfig.id}`,
    withCredentials: true,
    data:{
      content: content,
      md: md
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}

marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false
});

class EditorArea extends React.Component {
  handleChange(e) {
    console.log(this.props)
    this.props.onStateChange(e.target.value)
    console.log(this.props.md)
  }
  render() {
    return(
      <textarea value={this.props.data} onChange={e => this.handleChange(e)}></textarea>
    )
  }
}

class EditorButton extends React.Component {
  onClick(content,md) {
    postContent(content,md)
    console.log(content)
  }
  render() {
      return(
        <button onClick={(e)=>this.onClick(this.props.content,this.props.md)}>投稿ボタン</button>
      );
    }

}

class EditorOutput extends React.Component {
  render(){
    let html = marked(this.props.data)
    console.log(html)
    return(
      <div dangerouslySetInnerHTML={{__html: html}} />
    );
  }
}

class Editor extends React.Component {

  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      content: marked(window.sensayConfig.md),
      md:window.sensayConfig.md
    };
  }

  stateChange(str){
    this.setState({md: str});
    this.setState({content: marked(str)});
  }

  render() {
      return(
        <div className='c-editor'>
          <EditorArea onStateChange={e => this.stateChange(e)} data={this.state.md} />
          <EditorButton content={this.state.content} md={this.state.md} />
          <EditorOutput data={this.state.content} />
        </div>
      );
    }
}

export default Editor

main.js

import "babel-polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

// import commonmark from 'commonmark'
import marked from 'marked';
import Editor from './Editor.js';

if(document.querySelector('.js-container')) {
  ReactDOM.render(
    <Editor />,
    document.querySelector('.js-container')
  );
}

show.html.slim

  - if current_user and current_user.has_role? :admin
    p 君は管理者！
    style.
      | .c-editor button {position: fixed;bottom: 0px;left: 0;color: #fff;background: #5ac3da;padding: 13px;width: 20vw;}
      | .c-editor textarea {position: fixed;width: 20vw;height: calc(100vh - 50px);top: 0;left: 0;background: #fff;z-index: 999;border-right: 5px solid #ccc;border-bottom: 5px solid #ccc;}
    script.
      | window.MDconfig = {id: #{@controller.id} ,url: 'controller',md:`#{@controller.md}`}
    = javascript_pack_tag 'editor', 'data-turbolinks-track': 'reload'