CODEWITHSUNDEEP
javascriptandroidreact-nativesetstate
Max
Max

Reputation: 158

this.setState is not a function when used at onPress

I'm fairly new to React Native and was developing an app for myself when the undefined error fired.

Like most of us, I googled away seeing what the problem might be and it seemed to be a common problem, but no fixes worked. I tried arrow functions and .bind but nothing seemed to have worked.

import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableWithoutFeedback,
  Button,
} from 'react-native';
//I'll use the other things I've imported later :-)

const App = () => {
  state = {text: 'Hello World'};

  return (
    <View>
      <Text style={styles.titleStyle}>Title Text</Text>

      <TouchableWithoutFeedback
        onPress={() => (this.setState({
          text: 'Goodbye World',
        }))}>
        <View style={styles.physView}>
          <Text style={styles.physTitle}>More Text</Text>
          <Text style={styles.physText}>{this.state.text}</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
};

The goal is simply to have the text change to Goodbye World on press but the setState is not a function error fires instead. Eventually, I'd like to have Hello World and Goodbye World switch back and fourth on click but I'm not quite past this error yet.

Thanks in advance and yes, it is dummy text.

Upvotes: 0

Views: 1845

Answers (4)

Drioueche Mohammed
Drioueche Mohammed

Reputation: 560

You can't use state with functional component. So try to use React Hooks.

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. https://en.reactjs.org/docs/hooks-intro.html

import React, {useState} from 'react';
...
const App = () => {
  const [text, setText] =  useState('Hello World');

...

      <TouchableWithoutFeedback
        onPress={() => setText('Bye-bye')}>
...

Upvotes: 0

Kyryl Stronko
Kyryl Stronko

Reputation: 344

You use functional component with state. It doesn't work like that. Functional components can't have setState method.

There are two options:

// Use class syntax

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      text: 'Hello world!',
    }
  }
  
  onPress = () => {
    this.setState({text: 'Bye-bye'});
  }

  render() {
  
    return (
      <View>
        <Text style={styles.titleStyle}>Title Text</Text>

        <TouchableWithoutFeedback
          onPress={this.onPress}>
          <View style={styles.physView}>
            <Text style={styles.physTitle}>More Text</Text>
            <Text style={styles.physText}>{this.state.text}</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
};

// Use hooks

import {useState} from 'react'

const App = () => {

  const [text, setText] = useState('Hello World');

  return (
    <View>
      <Text style={styles.titleStyle}>Title Text</Text>

      <TouchableWithoutFeedback
        onPress={() => setText('Goodbye World');}>
        <View style={styles.physView}>
          <Text style={styles.physTitle}>More Text</Text>
          <Text style={styles.physText}>{this.state.text}</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
};

Upvotes: 1

JasonZ
JasonZ

Reputation: 66

The problem is that you just call this.setState(...) immediately when the component gets rendered for the first time. 

  <TouchableWithoutFeedback
onPress={this.setState({
  text: 'Goodbye World',
})}>

Notice how this.setState() is executed immediately, but what you want to do is pass a function which can get executed later. This can be done by wrapping the function in another function. So if you try this:

      <TouchableWithoutFeedback
    onPress={() => { this.setState({
      text: 'Goodbye World',
    }) }}>

It should behave as expected. All I did was wrap this.setState(...) with an arrow function so it becomes () => { this.setState(...) }

Upvotes: 0

Hossein Zare
Hossein Zare

Reputation: 580

Please try this code:

<TouchableWithoutFeedback onPress={ () => this.setState({ text: 'Goodbye World' }) }>

Upvotes: 1

Related Questions