I'm creating a React Native Android App that pulls data from a database and displays it.

I would like to run a Javascript Function before the render() displays the variables.

as

render() {
    return (
      <View><Text>{ data }</Text></View>
    );
}

Doesn't work because the variables aren't defined yet.

I'm creating a React Native Android App that pulls data from a database and displays it.

I would like to run a Javascript Function before the render() displays the variables.

as

render() {
    return (
      <View><Text>{ data }</Text></View>
    );
}

Doesn't work because the variables aren't defined yet.

• javascript
• database
• reactjs
• function
• react-native

• You can have a state variable saying isLoading set to true. Once the function gets executed you can setState to re-render. if(isLoading) // show loading indicator else // render <Text /> – Vivek_Neel Commented Apr 18, 2018 at 9:24
• ponentDidMount() will be called before render method. there you can call the method you want, read more about react lifecycles reactjs/docs/react-ponent.html – thaveethu gce Commented Apr 18, 2018 at 9:24
• you have to use conditional render like if data has value then only render like – Revansiddh Commented Apr 18, 2018 at 9:33
• @Vivek_Neel Could you post a example? – Teobot Commented Apr 18, 2018 at 9:52
• @thaveethugce Could you show my how by posting a example? I'm kinda new :( – Teobot Commented Apr 18, 2018 at 9:53

1 Answer 1

You can make use of ponentDidMount function to call an api (if you want to call it only once) that returns you the data which you can save in the state and render

class App extends React.Component {
    state = {
      data: [],
      loading: true
    }
    ponentDidMount() {

       ApiCall().then((data) => {
           this.setState({data, loading: false})
       })
    }
    render() {
      if(this.state.loading) {
          return 'Loading...'
      } 
      return (
         <View><Text>{this.state.data.map((obj => <View>{/* return that you want here from obj*/}</View>))}</Text></View>
      );
    }
}

To enhance UserExperience, you can have a loading state till your data is ready.