How to return the component from external function using react-native

Question

Here i am using two components,

var first = React.createClass(){
     render:function(){
          <View>
             <Text>First Component</Text>
             <TextInput style={{borderWidth:1,borderColor:'red'}} onPress={getData()}/>
          </View>
      }
})
    function getData(){
      <second/>
    }
    var second = React.createClass(){
         render:function(){
              <View>
                 <ScrollView>
                   <Text>Second component</Text>
                 </ScrollView>
              </View>
          }
    })

Required Result: First Component Second component

MikaelC · Accepted Answer · 2015-08-10 18:36:57Z

1

it looks like you're trying to show a new component when something is clicked? The way I would handle this is by using state. Generally you only want JSX to show up in your render method.

So what you should do is have something like:

var first = React.createClass({
  getInitialState: function() {
    return {
      showSecond: false
    };
  },
  _handlePress: function() {
    return this.setState(showSecond(true));
  },
  render: function() {
    <View>
      <View style={styles.first}>
        <Text> ... </Text>
        <TextInput />
        <TouchableHighlight onPress={@_handlePress}>
          <Text> Button </Text>
        </TouchableHighlight>
      </View>
      {if showSecond
        <View style={styles.second}>
          <ScrollView>
            <Text> Scroll Item </Text>
          </ScrollView>
        </View>
      }
    </View>
  }
});

Now what happens is when you press the button you change state, which rerenders your component, and now that the state is true, it shows the second component

edited Aug 10, 2015 at 18:36

answered Aug 10, 2015 at 18:09

MikaelC

4084 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vasavi Over a year ago

No i want to call the second component from external function only, that's the scenario i need

MikaelC Over a year ago

so i'm not sure why you would HAVE to use an external function, but even so, you would have to do a similar thing as above. You have to specify where in your rendered DOM the new component has to show up by using the if statement and watching for state. Then instead of having the component already there like above, you could call a function that returns the component. So on press, change state. The new state triggers the if statement and in turn the external function that returns JSX. It seems highly unnecessary to do it that way though.

vasavi Over a year ago

The second component I am talking about is required to be called in several other components. To enable code reuse and ease of maintenance I wanted to write a set of components that will be called within other components. This is how we are doing it in react. Will try in react-native and revert. Thanks for your help.

MikaelC Over a year ago

So if you have a component that shows up a lot, like a spinner. I would just write it in its own file with module.exports = React.createClass({..}) and then in every component that needs it, just require('./ui/spinner') to add the spinner to wherever you need it. That's how I do it for React and React-Native

Collectives™ on Stack Overflow

How to return the component from external function using react-native

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related