Throwing cross origin error upon setting state using React hooks - reactjs

Question

The following is my hook that calls my server and fetches data. after I receive a response from the server, I'm trying to set this response to my state.
const [userProfileData, setUserProfileData] = useState({})
useEffect(() => {
const profileRequestBody = `
query{
GetUserAndProfileData{
name
email
_id
figsList{
_id
figData
createdAt
}
}
}
`
const usertoken = token
axios({
method: 'POST',
url: 'http://localhost:5000/graphql',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${usertoken}`
},
data: {
query: profileRequestBody
}
}).then(response => {
debugger
//check if we recieved any errors in the request
setIsLoading(false)
setUserProfileData(response.data.data.GetUserAndProfileData)
let errors = response.data.errors
console.log(errors)
if (errors) {
throw new Error(errors[0].message)
}
}).catch(err => {
debugger
console.log(err)
})
}, []);
setUserProfileData(response.data.data.GetUserAndProfileData) is throwing the following error A cross-origin error was thrown. React doesn't have access to the actual error object in development. I'm actually setting state there.

Answer 1

The issues is not about
setUserProfileData(response.data.data.GetUserAndProfileData)
when A cross-origin error was thrown. React doesn't have access to the actual error object in development. occur, this is because when you render the data in view are in object format instead of the primitive format (e.g. int, string, float), I can give you a example
Data json format:
[
{
"name":"micky",
"age":29,
"sex":"M",
"families":[
{
"name":"carol",
"age":30,
"sex":"F"
}
]
}
]
Code :
export default function (props) {
const [data, setData] = React.useState([]);
React.useEffect(() => {
FamilyService.getdata().then(res => {
setData(res);
});
}, []);
const getdata = (row) =>{
var familymember = row.families.find(x => x.name.includes("carol"));
return familymember;
}
return (
<div>
{data.map((row, idx) => (
<span>{row.name}</span>
<span>{row.age}</span>
<span>{getdata(row)}</span>
))}
</div>
);
}
In above code
var familymember = row.find(x => x.families.includes("data"));
return familymember; <----- This code will cause error!!!!
Because it is return a object instead of a value, if I want to fix the error, it should use
return familymember.name;