Undefined is not a object in this.state - ReactNative

Question

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!

score 19 · Accepted Answer · edited May 23 '17 at 12:25

19

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.

edited May 23 '17 at 12:25

Community

1
1

answered Mar 27 '17 at 07:02

Patrik Prevuznak

2,181
15
14

my error is solved. I think I just need to adjust on how will the `View` will add and displayed because it doesn't display when I clicked the button. Thank you. – natsumiyu Mar 27 '17 at 08:00
The arrow function worked for me. Previously I had `` but I needed to do ` this.myFunction() }>`. – arnoldbird Feb 18 '18 at 18:20

score 1 · Answer 2 · answered Aug 11 '17 at 10:10

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>

score 1 · Answer 3 · answered Mar 10 '19 at 09:36

1

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

answered Mar 10 '19 at 09:36

Allison Walker

19
1

1

Welcome to SO, Please provide some context to your answer and why it's the right answer – Tamir Klein Mar 10 '19 at 09:41

Undefined is not a object in this.state - ReactNative

3 Answers3

Linked