CODEWITHSUNDEEP
jsonreactjsreact-nativeapi
JasonBeedle
JasonBeedle

Reputation: 469

TypeError: Cannot read property 'map' of undefined React Native

I am trying to call API data with axios. I am getting a response with console.log. Although the response is not showing on the screen. Really stuck with this.

export default class PrivacyPolicyScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: null, 
    }
  }
  componentDidMount () {
    return fetch ('API', {
      method: 'GET',
      headers:{
        'Content-Type': "application/json",
        'x-api-key': 'KEy'
    },
    })
    .then( (response)=> response.json() )
    .then ( (responseJson) => {
      console.log ("This is the response that should be in the app", {responseJson})
      this.setState({
        isLoading: false,
        dataSource: responseJson.terms,
      })
    })
    .catch((error) => {
      console.log(error)
    })
  };
    render () {
      if (this.state.isLoading){
        return (
          <Text >Loading Privacy!!!!</Text>
        ) 
      } else { 
        let privpolicy = this.state.responseJson.map((val, key ) => {
          return <View key={key}>
            <Text >{val.dataSource}</Text>
          </View>
        })
      return (
        {privpolicy}
      );
    }
  }
}

The error is TypeError: Cannot read property 'map' of undefined The undefined object is on Line 42. I have tried componentWillMount and several other iterations. I am really struggling finding the solution here.

Upvotes: 0

Views: 153

Answers (3)

Konstantin
Konstantin

Reputation: 1458

The reason you can't map the response is because you are not receiving an array to be able to map it (you can use .map only with arrays).

So, judging by your answers, you are receiving a string (text), which you then want to display. In order to do that, you'll have to do something as follows:

componentDidMount () {
    return fetch ('API', {
      method: 'GET',
      headers:{
        'Content-Type': "application/json",
        'x-api-key': 'KEy'
    },
    })
    .then( (response)=> response.json() )
    .then ( (responseJson) => {
      console.log ("This is the response that should be in the app", {responseJson})
      this.setState({
        isLoading: false,
        dataSource: responseJson,
      })
    })
    .catch((error) => {
      console.log(error)
    })
  };

    render () {
      if (this.state.isLoading) {
        return (
          <Text >Loading Privacy!!!!</Text>
        ) 
      } else if (this.state.dataSource) { 
        return (
          <View>
            <Text>{this.state.dataSource}</Text>
          </View>
        )
      }
      return null;
}

I've also added an additional check for the this.state.dataSource, although that's just something I personally like to do, you can remove it.

Try it like that and tell me if that works.

Upvotes: 1

Chandler Bing
Chandler Bing

Reputation: 343

It looks like you are using wrong variable that not even defined in state declaration.I would suggest you to change your render part as follows

   let privpolicy = this.state.dataSource.map((val, key ) => {
      return <View key={key}>
        <Text >{val.dataSource}</Text>
      </View>
    })

hope it works for you.

Upvotes: 1

Kerchik
Kerchik

Reputation: 73

You are mapping responseJson property, that does not exist in state. If i understood correctly, you stored response data to dataSource, so your map operation should look like this:

let privpolicy = this.state.dataSource.map((val, key ) => {}

Upvotes: 2

Related Questions