title: How to Separate Jsx inside render function into a separate file in ES6? or any other solution in react to separate the Logic and presentation?
body: <p>Here is the code in ES5 in which the jsx is written into a separate file  </p>
  
  <pre><code>import React from 'react';
  import Template from './template.jsx';
  
  const DetailElement = React.createClass({
    render: Template
  });
  
  export default DetailElement;
  enter code here
  </code></pre>
  
  <p>template.jsx file will be like this </p>
  
  <pre><code>import React from 'react';
  
  const render = function() {
  
      return (
        &lt;div&gt;Hello World&lt;/div&gt;
      );
  };
  
  export default render;
  </code></pre>
  
  <p>How can I write the same using ES6 Classes ?  Or any other solution is available to do this separation ?</p>
  
  <p>I have got the ES6 code something like this </p>
  
  <pre><code>import React, {Component} from 'react';
  import Template from './template.jsx';
  
  export default DetailElement extends Component {
     componentDidMount() {
      // some code
    }
  };
  DetailElement.prototype.render = Template;
  </code></pre>
  
  <p>Yes this is working.</p>