this.props Not Returning Fetched Data From Parent Component (React)

Question

I am attempting to render playlist information for an Audio Player in React. The data is coming from a fetch call in the parent component (PostContent.js). The data being returned is an array of objects that looks like: [ {name: ‘track name’, artist: ‘artist name’, url: ’https://blahblah.wav', lrc: ‘string’, theme: ‘another string’ }, {…}, {…}, etc. }

I am not able to return the data in the render() method of the child component (AudioPlayer.js). When I console.log(this.props.audio) in the render(), my terminal prints three responses. The first is an empty array, and the next two are the correct data that I need (an array of objects).

How can I set the props on the ‘audio’ key in the ‘props’ object in the render() method of the AudioPlayer.js component?

I should mention that I am using the react-aplayer library, and I am able to make this work with hard-coded data, as in the example here (https://github.com/MoePlayer/react-aplayer), but I am trying to make a dynamic playlist component for a blog website. Any advice is greatly appreciated.

AudioPlayer.js (Child Component)

import React, { PureComponent, Fragment } from 'react';
import ReactAplayer from '../react-aplayer';
import './AudioPlayer.css';
import sample from '../../src/adrian_trinkhaus.jpeg';


export default class AudioPlayer extends React.Component {
  // event binding example
  onPlay = () => {
    console.log('on play');
  };

  onPause = () => {
    console.log('on pause');
  };

  // example of access aplayer instance
  onInit = ap => {
    this.ap = ap;
  };

  render() {
    console.log('props in render of AudioPlayer', this.props.audio)
    const props = {
      theme: '#F57F17',
      lrcType: 3,
      audio: this.props.audio
    };

    return (
      <div>
        <ReactAplayer
          {...props}
          onInit={this.onInit}
          onPlay={this.onPlay}
          onPause={this.onPause}
        />
      </div>
    );
  }
}

PostContent.js (Parent Component)

import React, { Component, useState, Fragment } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import AudioPlayer from './AudioPlayer';

export default class PostContent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      episodeData: [],
      audio: []
    }
  }

  async componentDidMount() {
    const { id } = this.props.match.params;
    const response = await fetch(`http://localhost:5000/episode/${id}/playlist`);
    const jsonData = await response.json();
    const songs = jsonData;
    const audio = Object.keys(songs).map(key => {
      return {
        name: songs[key].name,
        artist: songs[key].artist,
        url: songs[key].url,
        cover: songs[key].cover,
        lrc: songs[key].lrc,
        theme: songs[key].theme
      }
    });
    this.setState({ audio })
  }


  componentDidUpdate(prevProps, prevState) {
    if (prevState.audio !== this.state.audio) {
      const newAudio = this.state.audio;
      this.setState({ audio: newAudio }, () => console.log('new audio', this.state.audio))
    }
  }

  render() {
    return (
      <Fragment>
        <AudioPlayer audio={this.state.audio} />
        <Link id='home-link' to='/' activeClassName='active'>Homepage</Link>
        {this.state.episodeData.map((item, i) => (
          <div key={i} className="word-content">
            <h2 className="show-title">{item.post_title}</h2>
            <div className="episode-post-content">
              <p>{item.post_content1}</p>
              <p>{item.post_content2}</p>
              <p>{item.post_content3}</p></div>
          </div>
        ))}
        <Table data={this.state.data} />
        <div className="bottom-link">
          <Link id='home-link' to='/' activeClassName='active'>Homepage</Link>
        </div>
      </Fragment>
    )
  }
}

Nikos Chatzivasileiadis Nikos Chatzivasileiadis · Accepted Answer · 2020-04-22T22:24:21

Actually I think it doesnt work because you set this.props inside a props obejct, so maybe you need to do something like

var that = this 
const props = {
  audio = that.props.audio 
}

this.props Not Returning Fetched Data From Parent Component (React)

2 Answers