CODEWITHSUNDEEP
javascriptandroidreact-native
natsumiyu
natsumiyu

Reputation: 3257

Undefined is not a object in this.state - ReactNative

I'm new in ReactNative, I'm getting the error undefined is not a object in my this.state.rows I am trying to dynamically add a View when a user clicks a Button. I tried using this and instead of using getInitialState I used constructor(props) but I keep on having the said error. Here is my code 

constructor(props) {
super(props);
this.state = {
  rows: [],
};
}

addRow(){
this.state.rows.push(index++)
this.setState({ rows: this.state.rows })
}

render(){

let contactView = () => {
    return <View>
              <AddComponent />
           </View>
}

return(
 <View>
      <View>
        {contactView}
      </View>

      <TouchableHighlight onPress={ this.addRow } >
        <Text>Add</Text>
      </TouchableHighlight>
  </View>
);

Thank you for your help!

Upvotes: 7

Views: 8931

Answers (3)

Allison Walker
Allison Walker

Reputation: 19

<TouchableHighlight onPress={ this.addRow.bind(this) } >
  <Text>some text</Text>
</TouchableHighlight>

Upvotes: 1

Sagar Devanga
Sagar Devanga

Reputation: 2819

You can do this too.

export default class CustomCard extends React.Component{
    constructor(props) {
        super(props);

        // This binding is necessary to make `this` work in the callback
        this.functionName= this.handleUpvote.bind(this);
    }
}

For calling the function you can call it like this.

<TouchableHighlight onPress={this.functionName} >
  <Text>Add</Text>
</TouchableHighlight>

Upvotes: 1

Patrik Prevuznak
Patrik Prevuznak

Reputation: 2261

You need to bind this to the function addRow like this:

<TouchableHighlight onPress={ this.addRow.bind(this) } >
  <Text>Add</Text>
</TouchableHighlight>

or create an anonymous function to automatically bind this:

<TouchableHighlight onPress={ () => this.addRow() } >
  <Text>Add</Text>
</TouchableHighlight>

For explanation refer to this.

Upvotes: 19

Related Questions