React Native - How to use a component as a JavaScript object?

Question

I'm newbie to React Native and having this problem when I was trying to build an iPhone application.

My code is like:

var React = require('react-native');
var MyListView = require('./MyListView');  // which renders a <ListView>...</ListView>

var SearchPage = React.createClass({
  onSubmitEditing: function () { /* do something */ },
  render: function() {
    return (
      <ScrollView>
        <TextInput onSubmitEditing={this.onSubmitEditing} />
        <MyListView />
      </ScrollView>
    )
  },
})

And I need to change the state of MyListView (update data source), when searching (onSubmitEditingevent). How should I do that? I thought there may be some solutions if I can use <MyListView /> as a JavaScript object, which I don't know how.

Any helps will be appreciate! Thanks in advance!

Eyal Eizenberg · Accepted Answer · 2015-10-25 09:59:34Z

1

You have 2 options:

Assuming that in the SearchPage component you know what the data is going to be, you can pass it as a props to the MyListView: `
However, I think that the better option will be to store the data in a store (flux), and then filter the list in the store. I did something like this:

reg = new RegExp(sanitizer.escapeRegExp(query), "i") filteredList = _.filter @initialDataSource(), (item) => item.name.match(reg) this.setState({dataSource: this.state.dataSource.cloneWithRows(filteredList)})

I am using lodash to filter the list and then load the dataSource. You can pass just the query to the MyListView which is much 'cleaner' <MyListView query={queryValue} />

answered Oct 25, 2015 at 9:59

Eyal Eizenberg

4,0333 gold badges21 silver badges31 bronze badges

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

1 Comment

iplus26 Over a year ago

Oh, thank you~ I have taken the props way. I will dig more deeper and try the flux thing. :)

Minkesh Jain · Accepted Answer · 2016-03-05 04:35:42Z

I think the best solution will be passing as the props to the MyListView component. You should maintain the state in SearchPage component and in the onSubmitEditing function set the state of it:

var SearchPage = React.createClass({
getInitialState: function(){
return {toUpdate: false}
}
  onSubmitEditing: function () { this.setState({toUpdate: true})},
  render: function() {
    return (
      <ScrollView>
        <TextInput onSubmitEditing={this.onSubmitEditing} />
        <MyListView toUpdate={this.state.toUpdate}/>
      </ScrollView>
    )
  },
})

Every time setState is called the Search component and its children are re-rendered. Inside the MylistView component you just need to check this.props.toUpdate and perform the operation based upon this prop value.

Collectives™ on Stack Overflow

React Native - How to use a component as a JavaScript object?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related