I'm studying React.js now could you help me please how can I export React ponent with props? Something like this:

class Group extends React.Component {
  static propTypes = {
    children: React.PropTypes.array.isRequired
  };  
  render () {
    return <div>
        <div className='group'>
          <h2>Boys:</h2>
          <GroupList children={
              this.props.children.filter(x => x.sex === 'male')
            } />
        </div>
        <div className='group'>
          <h2>Girls:</h2>
           <GroupList children={
              this.props.children.filter(x => x.sex === 'female')
            } />
        </div>
      </div>
  }
}

React.render(<Group children={children} />, document.body)

It should be simple like "export default Group"

I'm studying React.js now could you help me please how can I export React ponent with props? Something like this:

class Group extends React.Component {
  static propTypes = {
    children: React.PropTypes.array.isRequired
  };  
  render () {
    return <div>
        <div className='group'>
          <h2>Boys:</h2>
          <GroupList children={
              this.props.children.filter(x => x.sex === 'male')
            } />
        </div>
        <div className='group'>
          <h2>Girls:</h2>
           <GroupList children={
              this.props.children.filter(x => x.sex === 'female')
            } />
        </div>
      </div>
  }
}

React.render(<Group children={children} />, document.body)

It should be simple like "export default Group"

• javascript
• reactjs
• ecmascript-6

• To export a ponent it is export default Group – erichardson30 Commented Apr 11, 2016 at 19:22
• @erichardson30 Ok! How can I use it here? codepen.io/azat-io/pen/XdZZze – user5460152 Commented Apr 11, 2016 at 19:29
• If you have all your ponents in a single file you don't need to use it – erichardson30 Commented Apr 11, 2016 at 19:32
• @erichardson30 But I have it not in a single file – user5460152 Commented Apr 11, 2016 at 19:38

2 Answers 2

You will want to create an html element ex : ` and in your React.render should look like :

React.render(<Group />, document.getElementById("app"));

You shouldn't need to pass any props into your main ponent.

To export a ponent there are 2 ways to do so. You can either do

export default class Group extends React.Component {}

or

class Group extends React.Component { 
  ...
}
export default Group;

And then you will want to import the other ponents into the ponent you are wanting to add them in to.

Example :

import Child from './Child.jsx'
class Group extends React.Component { 
   ...
   render() {
     return (
       <Child />
     )
   }
}
export default Group;

And child would look like :

class Child extends React.Component { 
      ...
}
export default Child;

First thing, never render ponents in document.body

Second, instead of

React.render(<Group children={children} />, document.body)

Write,

export default Group