{ReactNative}_this2.setState error and conditional rendering

Hi everyone!

I’m fairly new to React and RN and I’m trying to rewrite a simple webpage I wrote in vanillaJS to an RN app.

The app is fairly simple and just converts an IP in a hexadecimal representation to a decimal representation.

Now I want a button which changes the view from the calculation view to an about view where I can write a bit about me. Since this is my “testing and learning app” options like *react-navigation* are a bit out of scope (I have another app where I tinker with this).

My thought was: I have a state, which tells what view the app is in. Based on this state a view is rendered.

But when I press the button, nothing happens. If i try to use the calculator again, the app throws an _this2.setState is not a function error.

Here is a link to a gist with comments to find the relevant method and functions


and here is link to the full source code, since I plan to released it as open source


I’ve found a few stackoverflow articles but it seems none of them really fits to my problem.

Thanks for your help!

    import React, {Component} from 'react';
    import {SafeAreaView, Text, TextInput, View, StatusBar, Keyboard, Button} from 'react-native';
    import styles from './src/styles';
    import ConvertIP from './src/component/ConvertIPs'
    export default class App extends Component {
        this.state = {
          hexIP: '',
          // initialise state for the view changing
          view: ['calc', 'about'],
          activeView: 'calc'
        this.disKeyboard = this.disKeyboard.bind(this);
        // binding the changeView method
        this.changeView = this.changeView.bind(this);
        // the changeView method to set the state based on the button press
        console.log('CHange view!')
        if (this.state.activeView == 'calc'){
          this.setState = {
            activeView: 'about'
        } else {
          this.setState = {
            activeView: 'calc'
      render() {
        return (
          <SafeAreaView style={{flex: 1, backgroundColor: '#F5FCFF'}}>
              <StatusBar backgroundColor="blue" barStyle="dark-content" />
              // conditional rendering if 
              {this.state.activeView == 'calc' && 
                <View style={styles.container}>
                  <Text style={styles.welcome}>Welcome to Decimal IP!</Text>
                  <Text>Enter a hexa decimal ip to convert it to a decimal ip</Text>
                  placeholder="Input HEX IP e.g 7F000001"
                  onChangeText={(hexIP) => this.setState({hexIP})}
                  <ConvertIP decIP={this.state.hexIP} />
                    title='Dismiss keyboard'
          // conditional rendering for about
          {this.state.activeView == 'about' && <Text>About</Text>}
          // button which calls the changeView method

In your function changeView you’re telling to assing an object to this.setState instead of calling a function, hence your error.

1 Like

Ahhh! Uff… thank you! Will test it.

Yep… that was the error… thank you very much!