CODEWITHSUNDEEP
javascriptreactjsecmascript-6
user5460152
user5460152

Reputation:

How to export React component with props?

I'm studying React.js now could you help me please how can I export React component 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"

Upvotes: 4

Views: 12963

Answers (2)

Rohit Singh Sengar
Rohit Singh Sengar

Reputation: 999

First thing, never render components in document.body

Second, instead of 

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

Write,

export default Group

Upvotes: 0

erichardson30
erichardson30

Reputation: 5044

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 component.

To export a component 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 components into the component 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;

Upvotes: 1

Related Questions