CODEWITHSUNDEEP
reactjs
Jan Kowalski
Jan Kowalski

Reputation: 411

How to send React Component as props

Hello I'm tryed thinking in React using ES6 and I have one problem. Look this example code es5:

var Hello = React.createClass({
  render: function() {
    return (
    <div>
    	<H1 content=<P/>></H1>
    </div>
    );
  }
});

var H1 = React.createClass({
  render: function() {
    return (
    <div>
    	<h1>hello from parent </h1>
      {this.props.content}
    </div>
    );
  }
});

var P = React.createClass({
  render: function() {
    return <p>hello from children</p>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

How do this the same using ES6 classes? I have tryed something like this: But it doesn't work coretly. Is it possible using ES6 React Components?

Upvotes: 2

Views: 5248

Answers (2)

Felix Kling
Felix Kling

Reputation: 817000

There is no difference between passing a component as prop in ES6 and ES5:

content=<P/>

While JSX is an extension of JavaScript (ECMAScript), it is incompletely independent of the version you are using.

If you encounter an issue then likely because something else in your conversion is wrong.

Upvotes: 0

Eduardo Henrique
Eduardo Henrique

Reputation: 318

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

class Hello extends React.Component {
  render(){
    return (
      <div>
        <H1>
          <P/>
        </H1>
      </div>
    );
  }
}

class H1 extends React.Component {
  render(){
    return (
      <div>
      	<h1>hello from parent </h1>
        {this.props.children}
      </div>
    );
  }
}

class P extends React.Component {
  render(){
    return (
      <p>hello from children</p>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

But you'll need to compile it first, you can use Babel.js and some other packages to make it works, like Gulp, Webpack or Grunt;

Upvotes: 1

Related Questions