Return Fetched Data from Axios in React

Question

Have a question about rendering fetched data with Axios. I'm able to log returned data to the console, however, it will not render on the screen.

I'm using an NPM Bitly module: https://www.npmjs.com/package/bitly

const BitlyClient = require('bitly');
const bitly = BitlyClient('ACCESS TOKEN');

State

  class Example extends Component {
    constructor() {
        super();
        this.state = { 
        landing: 'https://www.google.com/',
        newUrl: 'https://www.udacity.com/'
};

API Call

 componentDidMount() {
      bitly.shorten(this.state.landing)
      .then((response) => {
        this.setState({newUrl: response.data.url })
        console.log(response.data.url);
      })
      .catch(function(error) {
        console.error(error);
      });
    }

This returns data to the console but does not render to the page.

Render to Page

<Component> {this.newUrl} </>

What am I missing?

Answer 1

它应该是{this.state.newUrl} 。

Answer 2

Literally started to work as soon as I posted this smh.

I just updated the component to include the state.

Did not work

<Component> {this.newUrl} </>

Does Work

<Component> {this.state.newUrl} </>