CODEWITHSUNDEEP
javascriptecmascript-6reactjs
mshameer
mshameer

Reputation: 4141

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?

Here is the code in ES5 in which the jsx is written into a separate file 

import React from 'react';
import Template from './template.jsx';

const DetailElement = React.createClass({
  render: Template
});

export default DetailElement;
enter code here

template.jsx file will be like this 

import React from 'react';

const render = function() {

    return (
      <div>Hello World</div>
    );
};

export default render;

How can I write the same using ES6 Classes ? Or any other solution is available to do this separation ?

I have got the ES6 code something like this 

import React, {Component} from 'react';
import Template from './template.jsx';

export default DetailElement extends Component {
   componentDidMount() {
    // some code
  }
};
DetailElement.prototype.render = Template;

Yes this is working.

Upvotes: 5

Views: 7831

Answers (4)

Anup
Anup

Reputation: 2434

Yes you can do it your template code is like a functional comoponent basically it is a function that returns jsx. You just need to render your template in your DetailElement class

import React from 'react';
import Template from './template.jsx';

class DetailElement extends React.Component{
  render = Template
};

export default DetailElement;

here is an example I created codepen link now is a es6 class feature that you can define class property outside class or babel transformer that you need to check

Upvotes: 10

abhirathore2006
abhirathore2006

Reputation: 3745

here is how the ES6 React looks like

import * as React from 'react'
class SomeComponent extends React.Component{
  constructor(props){
    super(props);
  }

  render(){

    return (<div className="some class name">
                Hello World
            </div>
          )
  }
}

export default SomeComponent;


//import will look like

import SomeComponent from "./SomeComponent";

Detail Element will be something like this

import * as React from 'react'
import SomeComponent from "./SomeComponent";

class DetailElement extends React.Component{
  constructor(props){
    super(props);
  }

  render(){

    return (<div className="some classes">
               <SomeComponent/> 
            </div>
          )
  }
}

export default DetailElement;

Not Sure about es6 classes but you can write a function outside react component something like this

export const somefun = (parameter1)=> {
  return (<div>{parameter1} </div> )
}

then call function in render method

render(){

    return (<div className="some class name">
                {somefun()}
            </div>
          )
   }

Upvotes: 0

Dhaval Soni
Dhaval Soni

Reputation: 305

You have to import Component from 'react' and extend it to class.

import React, { Component } from 'react';
import Template from './template.jsx';

export class  DetailElement extends Component{

  render(){ 
       return(
         <Template></Template>
          );
}
}

Upvotes: 0

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

Use something like stateless function to define the JSX out of your component.

const HTML = (props) => <div> Hello {props.name}!</div>


class A extends React.Component{
  render() {
    return <HTML name="Joe"/>
  }
}

ReactDOM.render(<A/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Upvotes: 1

Related Questions