Why am I getting [object Object] on my axios GET request? - reactjs

Question

I'm making a react-express app, and am pulling the following data from a SQLite3 database:
[
{
id:1,
name: 'henry',
photo: '/Photos/dog1.jpg'
},
{
id:1,
name: 'boris',
photo: '/Photos/dog2.jpg'
},
{
id:1,
name: 'Borker',
photo: '/Photos/dog3.jpg'
}
]
The back end is working fine, and returns the above object upon making GET requests in postman. I'm using the following set up:
//Route
router.get('/', (req,res) => {
db.getDogs()
.then(dogs => {
res.json(dogs)
})
})
//API
export const getDogs = () => {
axios.get('/v1/dogs')
.then(res => {
console.log(res.data) // **returns [object Object]**
return res.data
})
}
//API call in react component
import React from 'react'
import {getDogs} from '../api/indexApi'
class App extends React.Component {
constructor(){
super()
this.state = {
dogs:[]
}
}
componentDidMount() {
getDogs()
.then(dogs => {
this.setState({
dogs:dogs
})
})
}
The problem is that the data I'm pulling is not rendering in the browser, and I think it has something to do with my axios get request - consoling logging the reponse from that request gave [object Object]. Any suggestions on how to fix this? Thanks.

Answer 1

It seems to me that you didn't provide the full API URL to axios, if you haven't created baseURL for axios, just provide the full URL localhost:800/api/dogs:
export const getDogs = () => {
return axios.get('localhost:8000/v1/dogs')
.then(res => {
console.log(res.data)
return res.data
})
}
You should be good to go!
To create baseURL for axios, DRY