CODEWITHSUNDEEP
reactjsreact-native
user5712342
user5712342

Reputation: 271

React-Native: How to wrap Child components under another class component

Let me Explain my question with an example:

in SomeComponent.js I have the following

export default class SomeComponent extends React.Component {
  render() {
    return (
      <View style={{flex:1}}>

      </View>
    )
  }
}

and in Root.js it imports 'SomeComponent' as follow

import SomeComponent from './SomeCoponent'
export default class SomeComponent extends React.Component {
  render() {
    return (
      <SomeComponent>
          <Text> hello </Text>
      </SomeComponent>
    )
  }
}

How does this work?

I saw some blog where some people do this:

export default class SomeComponent extends React.Component {
  render() {
    return (
      <View style={{flex:1}}>

        {/* code added here - start */}
        {React.Children.map(this.props.children, c => React.cloneElement(c, {
          route: this.props.route
        }))}
        {/* code added here - end */}

      </View>
    )
  }
}

But this does not work for me.

I am getting the following error: 

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)

Any help would be appreciated. Thanks

Upvotes: 25

Views: 32543

Answers (2)

angry kiwi
angry kiwi

Reputation: 11445

You can do it like this

export default class SomeComponent extends React.Component {
  render() {
    return (
      <View>
        {this.props.children}
      </View>
    )
  }
}

YupeComponent.js

import 'SomeComponent' from 'app/component/Somecomponent'
export default class YupeComponent extends React.Component {
  render() {
    return (
      <View style={{flex:1}}>
         <SomeComponent />
      </View>
    )
  }
}

Upvotes: 9

Muhammmad Hadi Rajani
Muhammmad Hadi Rajani

Reputation: 611

You can use this snippet

export default class SomeComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <View style={{flex:1}}>
      {this.props.children}
      </View>
    )
  }
}

Upvotes: 36

Related Questions