System Information
- Strapi Version 3.6.6:
- Windows 7:
- React Version 17.0.2:
- *Node v12.20.2:
- NPM Version 7.20.5:
Hi i was wondering if someone could please help me solve why an image I am fetching from Strapi backend, using a custom useFetch hook, is not appearing alongside the other data from the json object. I am using react native.
Here is the page component where the image should be displayed (i have given the image class “.review-card img” a width and height):
import React from 'react'
import { useParams } from 'react-router-dom'
import useFetch from '../hooks/useFetch'
export default function ReviewDetails() {
const { id } = useParams()
const { loading, error, data } = useFetch('http://localhost:1337/reviews/' + id)
if (loading) return <p>Loading...</p>
if (error) return <p>Error!</p>
console.log(data);
return (
<div className="review-card">
<div className="rating">
{data.rating}/10
</div>
<h2>
{data.title}
</h2>
<small>
console list
</small>
<img
src={data.image}
alt=""
className="review-image"
/>
<p>
{data.body}
</p>
</div>
)
}
The hook useFetch gets the data like so:
import { useEffect, useState } from "react";
const useFetch = (url) => {
const [data, setData] = useState(null)
const [error, setError] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(()=> {
const fetchData = async () => {
setLoading(true)
try {
// get data from fetch API
const res = await fetch(url)
// pass data to JS object
const json = await res.json()
// update data after fetch
setData(json)
// finish loading
setLoading(false)
} catch (error) {
setError(error)
setLoading(false)
}
}
fetchData()
}, [url])
return { loading, error, data }
}
export default useFetch;
and also you can see in the console that the image attribute appears in the console
Is there a different way I should be referencing the image data as I have played around with quite a bit and can’t seem to work. Thanks for taking the time to read this and I appreciate any help you might be able to give.
Thanks!