React Native - What's the different about this.state.data with this.data?

Question

I was confused what's the different about this.state.data with this.data

let say I have a code like this:

componentWillMount(){
    console.log(this.props.navigation.state.params.list);
    api.get('my API Url')
    .then((response)=> {
      this.setState({data: JSON.parse(response.data)[0]})
      this.data=JSON.parse(response.data)[0]
    })
    .catch((err)=>{
      console.log("axios catching error")
      Alert.alert("failed", "Retry to retrieve from API", [{text:'OK', onPress:()=>{this.componentWillMount()}}])
      console.log(err)
    })
  }

constructor(props){
    super(props); 
    this.state ={ data:[] }
    this.data=[]
  }

class Visit extends React.Component {
  render() {
    if (this.data.length==0){
      return(
        <Loader/>
      )
    }
    return (
      <Text>Visit</Text>
    );
  }
}
export default Visit;

with above code, I can't render <Text>Visit</Text> when this.data already have an array, but with this.state.data my App can rendering <Text>Visit</Text>,

so I want to know the different about this.state.data with this.data,

anyone can explain me?

Answer 1

this.state.data refers to data property of the current class state, while this.data refers to data property of current class.

A component's State is a trivial part of React environment, and if you can't understand this difference I suggest you to check this.

I also suggest you to check react official docs, almost everything from React applies to React Native, for me, React Native is almost the same as React, the only difference is you have more limited components in RN. We could say that RN is a subset of React

Note: property or properties it's not the same than component's props defined in React specs