React native set state is not working

Question

I am trying to update state in react native component. But its getting errors, Could someone help me.

I'm using react-native-cli verions: 2.0.1 react-native verions: 0.55.4

Here is my code:

import React, { Component } from 'react'

import {
    Button,
    Text,
    View,
} from 'react-native';

export class ToggleButton extends Component {

    state = {
        isDone: false
    };

    onAction() {
        const value = !this.state.isDone;
        this.setState({ isDone: value });

        const newValue = this.state.isDone;
        console.log(newValue);
    }

    render() {
        return (
            <View>
                <Button
                    title="Action"
                    onPress={this.onAction}
                />
            </View>
        )
    }
}

export default ToggleButton;

if you use a arrow function in your maybe solve the problem, you are calling a setState in another context if you pass the function like this. — Siloé Bezerra Bispo, Aug 10 '18 at 18:17
where to use, I'm a beginner to react native, could you please add that. — Damodar, Aug 10 '18 at 18:20

score 1 · Answer 1 · answered Aug 10 '18 at 18:28

You have three different solutions.

Bind your function in the constructor.
Use the experimental public class fields syntax.
Pass a lambda to executing your function.

The problem is that you're loosing the reference to this, because the function is not executed in the original context, so this.setState is not a function, but a undefined.

In this page there are examples for all of the approaches: https://reactjs.org/docs/handling-events.html

score 1 · Answer 2 · answered Aug 10 '18 at 18:29

1

Change

    onPress={this.onAction}

to

    onPress={this.onAction.bind(this)}

Check: this

answered Aug 10 '18 at 18:29

angelos_lex

1,593
16
24

3

or change `onAction() {` to `onAction = () => {` – Pat Needham Aug 10 '18 at 18:29

score 0 · Accepted Answer · answered Nov 13 '18 at 14:42

Below is the solution

import React, { Component } from 'react'

    import {
        Button,
        Text,
        View,
    } from 'react-native';

    export class ToggleButton extends Component {
       // Add state in constructor like this
      constructor(props){
        super(props);
        this.state = {
            isDone: false
        };
      }

        onAction() {
            const value = !this.state.isDone;
            this.setState({ isDone: value });

            const newValue = this.state.isDone;
            console.log(newValue);
        }

        render() {
            return (
                <View>
                    <Button
                        title="Action"
                        // Add function with onPress
                        onPress={() => this.onAction}
                    />
                </View>
            )
        }
    }

    export default ToggleButton;

React native set state is not working

3 Answers3