React app not rendring

Dears,
I’m on the Jammming exercise on React.js. I have been following all the steps properly and managed to reach the point 38.
I’m stucked on point 39. Pass the playlist tracks from the Playlist component to the TrackList component.
whenever I uncomment my TrackList component on Playlist.js the jammming react stop rendering
here the image before I put the uncomment the Tracklist component


after the code I endup on below with a message.

full


I see that the Tracklist has an issue but not sure what to change.

here my code
for playlist


for Tracklist

do anyone has faced this issue? is there anthing I’m doing wrong? please let me know if additional information needed
thanks

Hi, I will answer with the exact answer I give to you on your message:
Yup. It was actually quite simple to solve… Here is the component that wasn’t working for me:

import React from "react";
import "./TrackList.css";
import {Track} from "../Track/Track";
export class TrackList extends React.Component {
        
   render(){
        return(
            <div className="TrackList">
             /*note the -> ? before the array your are willing to map*/ 
                  {this.props.tracks?.map( 
                  (x) => {
                     return <Track 
                     track={x} 
                     key={x.id} 
                     onAdd={this.props.onAdd} 
                     onRemove={this.props.onRemove}
                     isRemoval={this.props.isRemoval}/>
                  }
               )}
            </div>
            )
        }
   
      }

So, aparently that simple “?” force the component to render. Don’t ask me why cause I don’t really know the deep reason for that.