Export functions out of react native components

Question

I just want to export a function to an actions.js file but i cannot get to work. This is the working base:

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
  }

  onOpen = () => {
    this.setState({visible:true});
    console.log(this.state.visible);
  }

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={()=>{this.onOpen();}}>More</Button>
      </View>
    );
  }
}

And now i tried this, which gives me an error when i press the button:

Error:

Unhandled JS Exception: _this.setState is not a function. (In '_this.setState({ visible: true })', '_this.setState' is undefined)

Code:

let onOpen = () => {
  this.setState({visible:true});
  console.log(this.state.visible);
}

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
    this.onOpen = onOpen.bind(this);
  }

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={()=>{this.onOpen();}}>More</Button>
      </View>
    );
  }
}

Can you please be more specific about which function you want to export? — Ajay Gaur, Nov 23 '17 at 11:13
I got your point but you should read more about classes and OOP pattern and how `this` should be used — Ajay Gaur, Nov 23 '17 at 11:15

Manoj Prabhakar · Accepted Answer · 2017-11-23T11:16:11.713

2

You cannot use the 'this' keyword outside the class Component. you cannot change the state of the component from outside the class.

More details here: Change state Outside Component

Further, If you want to change the state of the component outside a class, make use of redux state.

Redux JS

edited Nov 23 '17 at 11:16

answered Nov 23 '17 at 11:07

Manoj Prabhakar

977
9
21

Ajay Gaur · Answer 2 · 2017-11-23T11:46:40.150

1

The problem with your code is that you've define onOpen outside your class and you want to access setState function of the Component. I don't know why one would want to do this because onOpen belongs to class. But still if you want to put this outside class. You can do this by following way:

let onOpen = ({setState}) => {
  //retrieve setState here
  setState({visible:true});
}

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
    // You don't have to do this if onOpen is not in your class
    //this.onOpen = onOpen.bind(this);
  }

  render() {
    //send this.setState to onOpen
    const that = this;

    return (
      <View style={styles.container}>
        <Button onPress={()=>{onOpen({setState: that.setState});}}>More</Button>
      </View>
    );
  }
}

edited Nov 23 '17 at 11:46

answered Nov 23 '17 at 11:20

Ajay Gaur

5,140
6
38
60

Thanks for your reply, but it does not work: I get the error: undefined is not an object (evaluating 'this.updater') - the reason for my question is that i got so many states and functions in my class that i lost overview and want to refactor it. – ChrisRob Nov 23 '17 at 11:29
This is not the right way to refactor the class. Instead use `redux` in your app and make smaller React Components. – Ajay Gaur Nov 23 '17 at 11:45
ok thanks, you are right i'll do it differently with redux! but still your code does work. Maybe its just not possible to change state outside, like Manoj Prabhakar said – ChrisRob Nov 23 '17 at 11:53
Obviously it won't be possible. That is why you should study and learn how to think in Object Oriented Programming. If something belongs to class. It should be written and accessed in a class unless you're doing some inheritance or abstraction. – Ajay Gaur Nov 23 '17 at 11:54

Export functions out of react native components

2 Answers2