Jammming Project map function undefined?

Hi All,

Having an annoying issue with the map function for creating an array of components.

My code

import React from 'react';
import './TrackList.css';

import {Track} from '../Track/Track';

export class TrackList extends React.Component {

  listTracks() {
    console.log(this.props.listedTracks);
    return this.props.listedTracks.map(track => {
      return <Track key={track.id} title={track.title} artist={track.artist} album={track.album} />
    });
  }

  render() {
    return (
      <div className="TrackList">
        {this.listTracks()}
      </div>
    );
  }
}

keep getting the same error but the data looks fine when i console log the array?

Error message;

TypeError: Cannot read property 'map' of undefined
TrackList.listTracks
C:/Users/Steve-Laptop/OneDrive/Documents/WebSite/React/Jammming/jammming/src/components/TrackList/TrackList.js:10
   7 | 
   8 |  listTracks() {
   9 |    console.log(this.props.listedTracks);
> 10 |    return this.props.listedTracks.map(track => {
     | ^  11 |      return <Track key={track.id} title={track.title} artist={track.artist} album={track.album} />
  12 |    });
  13 |  }

log output is the expected array though?

(2) [{…}, {…}]
0: {id: "1", name: "Getting Jiggy With it", artist: "Will Smith", album: "Be Jiggy"}
1: {id: "2", name: "Lady In Red", artist: "Chris De Burgh", album: "Greatest Hits"}
length: 2
__proto__: Array(0)

Okay i posted this then realized that someone literally just posted the same problem.

I have spotted something interesting in my console log below;

[HMR] Waiting for update signal from WDS...
TrackList.js:11 {tracks: Array(2)}tracks: Array(2)0: {id: "1", name: "Getting Jiggy With it", artist: "Will Smith", album: "Be Jiggy"}1: {id: "2", name: "Lady In Red", artist: "Chris De Burgh", album: "Greatest Hits"}length: 2__proto__: Array(0)__proto__: Object
TrackList.js:11 undefined

it seems as if react is creating the component twice but the first line is shows my expected array and the second line it seems that it is now undefined which would explain my error.

Is this a react bug?

this is my edited code for the log

import React from 'react';
import './TrackList.css';

import {Track} from '../Track/Track';

export class TrackList extends React.Component {

  constructor(props) {
    super(props);

    console.log(this.props.searchResults);
  }

  render() {
    return (
      <div className="TrackList">
        <Track />
      </div>
    );
  }
}