CODEWITHSUNDEEP
javascriptreactjsweb-applicationstypeerror
jewelltaylor9430
jewelltaylor9430

Reputation: 119

React: TypeError: Cannot read property 'addEventListener' of null

I am trying to create a component that uses a third party audio player (react-audioplayer). However, I keep getting this error on my react development server: TypeError: Cannot read property 'addEventListener' of null. I have made sure to have the proper dependencies and the pathway to mp3 file is correct so I am not sure what is going on. It seems to work in other cases when the playlist object is created outside the component but I can't have it scale properly if that is the case. I would really appreciate any help you may be able to offer. I would be happy to provide any other information that you need.

Thank you,

John

This is the error I am getting by the way 

import React, { Component } from 'react';
import Audio from 'react-audioplayer';
import './Cover.css';

class Cover extends Component {
  constructor(props) {
    super(props);
    this.constructPlaylist = this.constructPlaylist.bind(this);
  }
  constructPlaylist() {
    const episodeName = this.props.episodeNumber;
    const playlist = [{
      name: episodeName,
      src: '../../Episodes/' + this.props.episodeNumber + '/' + this.props.episodeNumber + '.mp3',
    }];
    return playlist;
  }
  render() {
    return (
      <div>
        <img src={require('../../Episodes/' + this.props.episodeNumber + '/' + this.props.episodeNumber + '.png')} alt="" className="cover" />
        <Audio playlist={this.constructPlaylist()} />
      </div>
    );
  }
}

export default Cover;

Upvotes: 1

Views: 1093

Answers (1)

leaf
leaf

Reputation: 1764

As the doc says

playlist: An array of song information objects

Pass playlist an array instead of a function may fix the error

<Audio playlist={this.constructPlaylist()} />

EDIT: copy the component to my demo, adapt playlist data and it renders well, so problem should exist in other place

enter image description here

Upvotes: 1

Related Questions