Why is releaseyear = null and title = null on fetch?

Question

JavaScript

Good day, for some reason the value of title and releaseyear is not transferred to return, everything is displayed in console.log. I feel like I'm stuck somewhere. And is it possible to somehow update information from JSON every 5 seconds without reloading the page?

import React, { Component } from 'react'

export default class Player extends Component {
    state = {
        info: null,
        title: null,
      };
    
    async componentDidMount() {
        const url = "https://api.laut.fm/station/city/current_song";
        const response = await fetch(url);
        const data = await response.json();
        this.setState({ info: data });
        console.log(this.state.info.releaseyear);
    }
    render() {
        
        return (
            <section className="audio_player">
              <audio controls>
                <source src="http://stream.laut.fm/city" type="audio/mpeg" />
                <source src="http://stream.laut.fm/city" type="audio/ogg" />
                    Ваш браузер не поддерживается
                </audio>
                <p>{this.state.info.releaseyear} — {this.state.info.title}</p>
            </section>
        )
    }
}

Answer 1

you need to somehow protect yourself, tk. on first render you have orinfo === null
<p>{info?.releaseyear} — {info?.title}</p>
{info && <p>{info.releaseyear} — {info.title}</p>}