React, data fetched from module (django) isn't being displayed

What's up some guys... I'm having trouble displaying my data, which I fetch from my django modules. Fetching the data seems to work fine, however it won't render and display. Would very much appreciate any help. Right now only the containers and stuff is getting displayed, none of the data from the module. Here is my react component:

NewsItemPage.js

import "bootstrap/dist/css/bootstrap.min.css";
import React, {Component, useEffect, useState} from "react";
import {useParams} from "react-router-dom";
import {Card, Col, Container, Row} from "react-bootstrap";
import sheet from "./Images/metal-sheet.jpg";
import "./css/newsItem.css";
import {BoxArrowUpRight, Textarea} from "react-bootstrap-icons";
import {Link} from "react-router-dom";

function withParams(NewsItemPage){
  return props => <NewsItemPage {...props} params={useParams()}/>
}

class NewsItemPage extends Component{
    state={
        item: {},
        loading: true
    }

    async componentDidMount(){

        let {id} = this.props.params;

        try {
            const res = await fetch(`http://localhost:8000/api/news/${id}`);
            const item = await res.json();
            this.setState({
                item: item,
                loading: false
            })
        }catch(e){
            console.log(e);
        }
    }

    render() {
      if(this.state.loading){
        return <h1 className="text-center">Vänligen vänta...</h1>
      }

      console.log(this.state.item);

      return(
        this.state.item ?
          <Container fluid className="news-wrapper ">
            <Row fluid className="news-page-col">
              <Col className="news-page-col text-center mt-5 mb-5">
                <h1>{this.state.item.title}</h1>
                <hr className="divider"/>
              </Col>
            </Row>
            <Row fluid className="gap-5 justify-content-center mt-5">
              <Col>
                <img src={this.state.item.image}  alt="image"/>
              </Col>
            </Row>
            <h4>{this.state.item.date}</h4>
            <Row>
              <Col>
                <Textarea>{this.state.item.description}</Textarea>
              </Col>
            </Row>
          </Container>
          : <h1>Här finns inget ännu...</h1>
      );
    }
}

export default withParams(NewsItemPage);

And here is the output from the 'console.log(this.state.item);' inside the render method above:

0
: 
created_on
: 
"2023-01-18T16:01:15.744999Z"
description
: 
"hello this is my testing news"
id
: 
10
image
: 
"http://localhost:8000/Images/Images/shutterstock_634808618-1-1024x683.png"
title
: 
"testing"
[[Prototype]]
: 
Object
length
: 
1
[[Prototype]]
: 
Array(0)

Back to Top