I am making a component that should transfer the data in file controllers/hello.js(backend) to App.js(frontend in React.js app) which is imported from the router/collector components/hello.js
My components/hello.js looks like this:
import { React } from 'react'
import { useEffect, useState } from 'react';
export const Hello = ()=>{
const[initialState, setInitialState] = useState([], )
useEffect(()=> {
fetch('http://localhost:3001/api/', {mode: "no-cors"})
.then(response => response.json()).then(data => console.log(JSON.parse(data)))
// if (res.ok){
// return res.json()
// }
// }).then(jsonResponse => console.log(jsonResponse))
},[])
// console.log(initialState)
console.log("should work ")
return (<div>Hello</div>)
}
And I get this error:
Uncaught (in promise) SyntaxError: Unexpected end of input
at hello.js:9:1
when I check the API the only response I get is this
but it should be matching what's in localhost:3001/api/ or what's in controllers/hello.js which is

Do you have any idea how I can solve this? Any help is appreciated.