Jamming Project keeps saying props.tracks.map is not a function and props.track is undefined

I’m working on the Jammin project and it keeps telling me props.tracks.map is not a function and props.track is undefined even though I hard coded an example object for it to pass the props from. (Not sure exactly how to explain) It also keeps saying this error even though I deleted the file and created a new one:

“Already included file name ‘c:/Users/Hannah/Desktop/Coding/projects/Codecademy Projects/jammin/src/components/TrackList/TrackList.js’ differs from file name ‘c:/Users/Hannah/Desktop/Coding/projects/Codecademy Projects/jammin/src/components/Tracklist/TrackList.js’ only in casing.
The file is in the program because:
Imported via “…/TrackList/TrackList.js” from file ‘c:/Users/Hannah/Desktop/Coding/projects/Codecademy Projects/jammin/src/components/SearchResults/SearchResults.js’
Root file specified for compilation”

First the Track.js

import React from "react";

import './Track.css';

const Track = (props) => {

    const renderAction = () => {
       if (props.isRemoval) {
        return (
            <button className="Track-action" >-</button>
       } else {
        return (
            <button className="Track-action" >+</button>
    return (
            <div className="Track">
                <div className="Track-information" >
                    <p>{props.track.artist} | {props.track.album} </p>

export default Track;

The TrackList.js

import React from "react";
import './TrackList.css';
import Track from "../Track/Track";
import SearchResults from "../SearchResults/SearchResults";

const TrackList = (props) => {

  return (
      <div className="TrackList">
      {props.tracks.map((track) => {
        return (

export default TrackList;

The SearchReasults.js

import React from "react";

import "./SearchResults.css";

import TrackList from "../TrackList/TrackList.js";

const SearchResults = (props) => {
  return (
    <div className="SearchResults">
      <TrackList tracks={props.searchResults} onAdd={props.onAdd} />

export default SearchResults;

and the App.js

import React, { useState } from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';
import Track from '../Track/Track';

const App = (props) => {

  const [searchResults, setSearchResults] = useState(
    {searchResults: [
          name: 'Example Track Name', 
          artist: 'Example Track Artist', 
          album: 'Example Track Album',
          id: 1,
          name: 'Example Track Name 2', 
          artist: 'Example Track Artist 2', 
          album: 'Example Track Album 2',
          id: 2,


  return (
        Ja<span className="highlight">mm</span>ing
      <div className="App">
        <SearchBar />
        <div className="App-playlist">
        <SearchResults  searchResults={searchResults} />
          {/* <!-- Add a Playlist component --> */}
        <Playlist />
        <Track />

export default App;

If anyone could help me I’d appreciate it.

I am not certain since I have not tested. But it seems to me that in App.js where you define the state searchResults you initialize it with an object containing an array called searchResults. That means, to access the actual array you would need to do so with searchResults.searchResults.

When you call useState() try passing in an array directly instead.

A quick test to prove this would be to use the following line <SearchResults searchResults={searchResults.searchResults} />. If that works you can update the useState() call.