React native Wordpress API not fetching posts

Question

Hello i recently just started learning react native. I am now trying to fetch data from a wordpress api with the following code with this exact api address but nothing loads up.

    import React from 'react';
    import { FlatList, ActivityIndicator, Text, View  } from 'react-native';

    export default class FetchExample extends React.Component {

    constructor() {
    super();
    this.state = {
      posts: []
    }
    }
    componentDidMount() {
    let dataURL = "https://click9ja.com/wp-json/wp/v2/posts";
    fetch(dataURL)
      .then(response => response.json())
      .then(response => {
        this.setState({
          posts: response
        })
      })
  }
    render() {
    let posts = this.state.posts.map((post, index) => {
      return
      <View key={index}>
      <Text>Title: {post.title.rendered}</Text>
      </View>
    });
   return (
      <View>
        <Text>List Of Posts</Text>
        <Text>{posts}</Text>
      </View>
     )
  }
}

Any advice will be appreciated.

What error message is shown in the browser devtools console? — sideshowbarker
– sideshowbarker, Commented Aug 29, 2018 at 7:56

Umar745 · Accepted Answer · 2018-09-01 18:21:34Z

1

Firstly wrap return value in parenthesis

let posts = this.state.posts.map((post, index) => {
      return (
      <View key={index}>
      <Text>Title: {post.title.rendered}</Text>
      </View> 
     );
    });

Secondly you cannot render variables in text tags. It should be something like this

<View>{varaible}</View>

Therefore, <Text>{posts}</Text> should just be {post}

answered Sep 1, 2018 at 18:21

Umar745

3461 gold badge4 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Billy · Accepted Answer · 2018-08-29 04:11:24Z

0

Fetch will have GET method as default when requesting to server. To set it to make a POST method or other methods you will need to add extra parameter in the fetch In your case it will be

fetch('https://click9ja.com/wp-json/wp/v2/posts', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

Some API will need headers and body, please make sure to check the API Documentation before using it for understanding purpose.

For more information on Fetch in React native you can visit it here For more information on What is API you can visit it here

Hope this help.

answered Aug 29, 2018 at 4:11

Billy

4971 gold badge5 silver badges24 bronze badges

6 Comments

Badman Over a year ago

Yes i understand the Fetch vs Post argument. I am trying to GET data from the API so FETCH should work for me right now, what i don't understand is why the code above isn't fetching data from that particular API.

Billy Over a year ago

what do you mean?

Badman Over a year ago

I have a wordpress API with a lot of data, the code above can't FETCH or GET the data. Do you understand me now?

Billy Over a year ago

try to send the request through Postman and see if it is fetch that is unable or the API that does not return anything.

Badman Over a year ago

@sir-kosawa It works on postman, it also work when I visit the API directly on web browser. I also substituted my API with the API from react native documentation on networking it still doesn't work. I'm tired.

|

Collectives™ on Stack Overflow

React native Wordpress API not fetching posts

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related