Call an API using superagent?

Question

I have an API that consists this branch of data

{
  "data": {
    "id": ,
    "title": ,
    "description": ,
    "old_price": "100",
    "new_price": "50",
    "size": "50",
    "quantity": 20,
  },
  "errors": null,
  "code": 1
}

I am using superagent in order to call the API and render this information, but I am doing it in wrong way.

Here my code

import React from 'react';
import {render} from 'react-dom';
import superagent from 'superagent';
import Layout from './components/Layout';

class App extends React.Component{
  constructor(){
    super()
    this.state={
      name:''
    }
  }
    componentDidMount(){
        console.log('componentDidMount');

        const url='http://...';
        superagent
        .get(url)
        .query(null)
        .set('Accept', 'application/json')
        .end ((error, response)=>{
            const title=response.body.response
            console.log(JSON.stringify(title));
            
            this.setState({
              name:title
            })
        })
        
    }
  render(){
    return(
      <Layout data={this.state}/>
    )
  }
}


render(<App />, document.getElementById('app'));

Here I render it

import React from 'react';

export default class Layout extends React.Component{
    render(){
        let data = this.props.data;
        return (
            <div> 
                 {data.name}
            </div>
        )
    }
}

But is not rendering, I think I am doing in wrong way. Please could you help me with that.

Answer 1

const title=response.body.response

Should be

const title=response.body

most likely