Get image from API JSON GET to React Native

Question

I'm going to post my question again but differently this time. So this is my current app in React Native:

Where you see the picture of the suitcases, I need to put a picture from the post that I made in Wordpress. The title and description are also from the same posts, trough an API.

This is the current code:

                return (
                    
                        
                            

                                
                                {item.title.rendered}
                                {item.yoast_head_json.og_description}
                                
                                 navigation.navigate("DetailScreen", {itemTitle: item.title.rendered})}>
                                    Bekijk product: {item.title.rendered}
                                

                            
                        
                    
                    
                )

WITH:

const AllSuitcasesScreen = ({ navigation }) => {
 
  const [suitcases, setSuitcases] = useState([]);
 
  const getSuitcases = async () => {
    try {
      const response = await fetch("https://evivermeeren.com/wp-json/wp/v2/posts?categories=59", {
 
        }
      )
      const json = await response.json();
      console.log(json);
      setSuitcases(json);
    } catch (error) {
      console.error(error);
    }
 
  }
 
  useEffect(() => {
    getSuitcases();
  }, []);
 
  const [input, setInput] = useState("");
  console.log(input);

  return (
    

          
            Onze koffers
            
              
              0
            
          

           setInput(text)}
          />

          


        
    
  );
}

This is the line I want to change:

And in the JSON file, this is what I get:

[
    {
        "id": 2484,
        "date": "2022-12-17T15:02:56",
        "date_gmt": "2022-12-17T15:02:56",
        "guid": {
            "rendered": "https://evivermeeren.com/?p=2484"
        },
        "modified": "2022-12-18T10:39:37",
        "modified_gmt": "2022-12-18T10:39:37",
        "slug": "zwart-groot-hard-249euro",
        "status": "publish",
        "type": "post",
        "link": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
        "title": {
            "rendered": "Evo L Black"
        },
        "content": {
            "rendered": "
Een grote koffer in een zwarte kleur, gemaakt van hard materiaal. De prijs van deze koffer is €249.
",
            "protected": false
        },
        "excerpt": {
            "rendered": "Een grote koffer in een zwarte kleur, gemaakt van hard materiaal. De prijs van deze koffer is €249.
",
            "protected": false
        },
        "author": 1,
        "featured_media": 2229,
        "comment_status": "closed",
        "ping_status": "closed",
        "sticky": false,
        "template": "",
        "format": "standard",
        "meta": [],
        "categories": [
            59
        ],
        "tags": [],
        "yoast_head": "
Evo L Black - Evi Vermeêren











	
	
	



	
	
	

",
        "yoast_head_json": {
            "title": "Evo L Black - Evi Vermeêren",
            "robots": {
                "index": "index",
                "follow": "follow",
                "max-snippet": "max-snippet:-1",
                "max-image-preview": "max-image-preview:large",
                "max-video-preview": "max-video-preview:-1"
            },
            "canonical": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
            "og_locale": "nl_NL",
            "og_type": "article",
            "og_title": "Evo L Black - Evi Vermeêren",
            "og_description": "Een grote koffer in een zwarte kleur, gemaakt van hard materiaal. De prijs van deze koffer is €249.",
            "og_url": "https://evivermeeren.com/zwart-groot-hard-249euro/koffers/",
            "og_site_name": "Evi Vermeêren",
            "article_published_time": "2022-12-17T15:02:56+00:00",
            "article_modified_time": "2022-12-18T10:39:37+00:00",
            "og_image": [
                {
                    "width": 200,
                    "height": 300,
                    "url": "https://evivermeeren.com/wp-content/uploads/2022/12/zwart-klein-4-300-hard-4-e1670410664142.webp",
                    "type": "image/webp"
                }
            ],

So I need this link:

"url": "https://evivermeeren.com/wp-content/uploads/2022/12/zwart-klein-4-300-hard-4-e1670410664142.webp",

To get here:

I tried doing this:

But it did not work. I get the error: 'undefined is not an object'.

Does anyone know how to fix this?

Get image from API JSON GET to React Native

Answers (1)

Related Questions