REACT GET requiest getting base url twice - reactjs

Question

Using REACT front-end with Django back-end. When i call request api i can see it being pulled correctly, however when onClick is called i get a 404 XHRGEThttp://localhost:3000/http//127.0.0.1:8000/undefined so it seems that i am somehow calling the base url twice but i am not sure how?
here is my main component file:
import React, { Component } from 'react';
import SubtagsList from './list_subtags';
import axios from 'axios';
class TagsList extends Component {
constructor(props) {
super(props);
this.state = {
tagData: [],
subtags: " ",
showComponent: false,
}
this.getSubtagDetail = this.getSubtagDetail.bind(this);
this.showSubtags = this.showSubtags.bind(this);
}
getSubtagDetail(item){
axios.get("http//127.0.0.1:8000/".concat(item.absolute_url))
.then((response) =>{
this.setState({subtags: response.data})
})
.catch(function(error){
console.log(error);
})
}
showSubtags(item){
this.getSubtagDetail(item);
this.setState({showComponent: true})
}
componentDidMount(){
axios.get("http://127.0.0.1:8000/")
.then( (response) => {
this.setState({tagData: response.data})
})
.catch(function(error) {
console.log(error);
})
}
render() {
return (
<div>
{this.state.tagData.map((item) => {
return (
<h3 key={item.id} onClick={() => this.showSubtags(item)}>
{item.tag_name}
</h3>
);
})}
{this.state.showComponent ? (
<SubtagsList subtagDetail={this.state.subtags} />
) : null}
</div>
)
}
}
export default TagsList;
here is the api response:
[
{
"id": 2,
"tag_name": "IT/Computer Issues",
"type": "Tag"
},
{
"id": 1,
"subtag_name": "Website",
"absolute_url": "/1",
"type": "SubTag"
}
]
and this is the SubtagsList component imported:
import React, { Component } from 'react';
class SubtagsList extends Component {
render() {
const obj = this.props.subtagDetail;
return (
<div style={{ color: "yellow", border: "1px solid yellow" }}>
<p>{obj.subtag_name}</p>
</div>
)
}
}
export default SubtagsList;
Can anyone shed some light on what i might be doing wrong here?