React + Contentful = no image

APIs
1

Hi everyone!

I have decided to use React and Contentful for a small project of mine. I have created four articles which have title, date, image and full article. I can get and display on page title, date and full article(text). But no way, no matter what I do, I cant display image.

I have tried this porject just with JS & HTML and I could display all items.

I really dont get it, why the same path to the image url works in JS but not in React.

Code in my Articles.js

import React, { useContext } from “react”;

import Article from “./components/Article”;

import { Context } from “./Context”;

function Articles() {

const { allArticles } = useContext(Context);

console.log(allArticles);

const articleElement = allArticles.map((news) => (

<Article key={news.fields.id} news={news} />

));

return

{articleElement}
;

}

export default Articles;

And this is my Article.js
import React from “react”;

function Article({ news }) {

const { title, date, besedilo } = news.fields;

const image = news.fields.image.fields.file.url;

return (

<div className="show-news">

  {/* <img src={news.fields.image.fields.file.url} alt="article" /> */}

  <img src={news.image} alt="article" />

  <div className="news-content">

    <h2>{title}</h2>

    <p>{date}</p>

    <p>{besedilo}</p>

  </div>

</div>

);

}

export default Article;

And the ERROR
TypeError: news.fields.image.fields is undefined

Article

C:/Users/bostj/Desktop/get-news/src/components/Article.js:5

 2 |
 3 |  function Article({ news }) {  
4 |   const { title, date, besedilo } = news.fields;> 
5 |   const image = news.fields.image.fields.file.url;  
6 |   return (  
7 |     <div className="show-news">  
8 |       {/* <img src={news.fields.image.fields.file.url} alt="article" /> */}
2

can you try

<img src={`https:${news.fields.image.fields.file.url}`} alt="article" />
3

Hi!

I tried it, and I still get this error:
TypeError: news.fields.image.fields is undefined

6 |return (   
7 |    <div className="show-news">
>  8 |      <img src={`https:${news.fields.image.fields.file.url}`} alt="article" />     | ^   
9 |   
10 |      <div className="news-content">  
11 |        <h2>{title}</h2>
4

And this is the content of my Context.js file

import React, { useState, useEffect } from “react”;

const Context = React.createContext();

function ContextProvider({ children }) {

const [allArticles, setAllArticles] = useState([]);

const API_BASE_URL = “https://cdn.contentful.com”;

const API_SPACE_ID = “private ;)”;

const API_TOKEN = “private ;)”;

const url = ${API_BASE_URL}/spaces/${API_SPACE_ID}/entries?access_token=${API_TOKEN}&content_type=klubskeNovice;

useEffect(() => {

fetch(url)

  .then((res) => res.json())

  .then((data) => setAllArticles(data.items));

}, []);

/* console.log(allArticles); */

return (

<Context.Provider value={{ allArticles }}>{children}</Context.Provider>

);

}

export { ContextProvider, Context };

5

Solved!

In Context I had to change
useEffect(() => {

fetch…}

into

useEffect(() => {

client.getEntries().then((data) => setAllArticles(data.items));

}, []);

I can get the images now!!! SUPER HAPPY

1 Like