AudioGuide Demo - fetch componentDidMount

AudioContentList.js

(...)
 
constructor() {
    super();
    this.state = {
      audioList: { data: [] },
    };
}

componentDidMount() {
  const { locale, content } = this.props;
  this.state.locale = locale;
  const drupalLocale = this.state.locale.substring(0, 2);
  const guideEndpoint = `${restHostName}/jsonapi/node/audio?sort=title&filter[langcode][value]=${drupalLocale}`;
    fetch(guideEndpoint)
      .then(response => response.json())
      .then(audioList => this.setState({ audioList }));
}

render() {
    return (
      <div className={s.root}>
        <div className={s.container}>
          <div>
            <ul>
              {this.state.audioList.data.map(
                                audioItem =>
                                    (<li key={audioItem.attributes.uuid}>
                                      <Link className={s.link} to={`/audio/${audioItem.attributes.uuid}`}>
                                        {audioItem.attributes.title}
                                      </Link>
                                    </li>),
                            )}
            </ul>
          </div>
        </div>
      </div>
 );

(...)