Возврат извлеченных данных из Axios в React

Question

Есть вопрос о рендеринге выбранных данных с Axios.Я могу записать возвращенные данные на консоль, однако они не будут отображаться на экране.

Я использую модуль NPM Bitly: https://www.npmjs.com/package/bitly

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

Состояние

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

Вызов API

 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);
      });
    }

Возвращает данные на консоль, но не отображает их на странице.

Визуализация на странице

<Component> {this.newUrl} </>

Чего мне не хватает?

Answer 1

Буквально начал работать, как только я опубликовал это smh.

Я только что обновил компонент, включив в него состояние.

Не работает

<Component> {this.newUrl} </>

работает

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

Answer 2

должно быть {this.state.newUrl}.