title: useContext give error Cannot read property '...' of undefined
body: <p>I need help with this issue, my app component as in the image below. I want to store track object <code>inselectedTrack</code> in the state using <code>useState</code> when I click on the view details button. Then use it to display track details in  instead of making another fetch from API to get tack details, but when I use <code>useContext</code> inside  give me this error <code>TypeError: Cannot read property 'selectedTrack' of undefined</code>.
  <a href="https://i.stack.imgur.com/aUywt.png" rel="noreferrer">React Components</a></p>
  
  <p></p>
  
  <pre><code>import React from 'react';
  import Header from './Header';
  import Search from '../tracks/Search';
  import Tracks from '../tracks/Tracks';
  import Footer from './Footer';
  import TrackContextProvider from '../../contexts/TrackContext';
  
  const Main = () =&gt; {
    return (
      &lt;div&gt;
        &lt;TrackContextProvider&gt;
          &lt;Header /&gt;
          &lt;Search /&gt;
          &lt;Tracks /&gt;
          &lt;Footer /&gt;
        &lt;/TrackContextProvider&gt;
      &lt;/div&gt;
    );
  };
  
  export default Main;
  </code></pre>
  
  <p>TrackContext.js</p>
  
  <pre><code>import React, { createContext, useState, useEffect } from 'react';
  export const TrackContext = createContext();
  
  const TrackContextProvider = props =&gt; {
  
    const [tracks, setTracks] = useState([]);
    const [selectedTrack, setSelectedTrack] = useState([{}]);
  
    const API_KEY = process.env.REACT_APP_MUSICXMATCH_KEY;
  
    useEffect(() =&gt; {
      fetch(
        `https://cors-anywhere.herokuapp.com/https://api.musixmatch.com/ws/1.1/chart.tracks.get?chart_name=top&amp;page=1&amp;page_size=10&amp;country=fr&amp;f_has_lyrics=1&amp;apikey=${API_KEY}`
      )
        .then(response =&gt; response.json())
        .then(data =&gt; setTracks(data.message.body.track_list))
        .catch(err =&gt; console.log(err));
      // to disable the warning rule of missing dependency
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
  
    // state for heading
    const [heading, setHeading] = useState(['Top 10 Tracks']);
  
    return (
      &lt;TrackContext.Provider value={{ tracks, heading, selectedTrack, setSelectedTrack }}&gt;
        {props.children}
      &lt;/TrackContext.Provider&gt;
    );
  };
  
  export default TrackContextProvider;
  </code></pre>
  
  <p></p>
  
  <pre><code>import React, { Fragment, useContext } from 'react';
  import { Link } from 'react-router-dom';
  import { TrackContext } from '../../contexts/TrackContext';
  
  const TrackDetails = () =&gt; {
    const { selectedTrack } = useContext(TrackContext);
    console.log(selectedTrack);
    return (
      &lt;Fragment&gt;
        &lt;Link to="/"&gt;
          &lt;button&gt;Go Back&lt;/button&gt;
        &lt;/Link&gt;
        &lt;div&gt;
          {selectedTrack === undefined ? (
            &lt;p&gt;loading ...&lt;/p&gt;
          ) : (
            &lt;h3&gt;
              {selectedTrack.track.track_name} by {selectedTrack.track.artist_name}
            &lt;/h3&gt;
          )}
          &lt;p&gt;lyrics.............&lt;/p&gt;
          &lt;div&gt;Album Id: &lt;/div&gt;)
        &lt;/div&gt;
      &lt;/Fragment&gt;
    );
  };
  
  export default TrackDetails;
  </code></pre>
  
  <p></p>
  
  <pre><code>import React, { useState, useContext, useEffect } from 'react';
  import { Link } from 'react-router-dom';
  import { TrackContext } from '../../contexts/TrackContext';
  
  const Track = ({ trackInfo }) =&gt; {
    const { selectedTrack, setSelectedTrack } = useContext(TrackContext);
  
    const handleClick = e =&gt; {
      setSelectedTrack(trackInfo);
    };
  
    console.log(selectedTrack);
  
    return (
      &lt;li&gt;
        &lt;div&gt;{trackInfo.track.artist_name}&lt;/div&gt;
        &lt;div&gt;Track: {trackInfo.track.track_name}&lt;/div&gt;
        &lt;div&gt;Album:{trackInfo.track.album_name}&lt;/div&gt;
        &lt;div&gt;Rating:{trackInfo.track.track_rating}&lt;/div&gt;
        &lt;Link to={{ pathname: `/trackdetails/${trackInfo.track.track_id}`, param1: selectedTrack }}&gt;
          &lt;button onClick={handleClick}&gt;&gt; View Lyric&lt;/button&gt;
        &lt;/Link&gt;
      &lt;/li&gt;
    );
  };
  
  export default Track;
  </code></pre>
  
  <p>UPDATE: adding Tracks component</p>
  
  <pre><code>import React, { useContext, Fragment } from 'react';
  import Track from './Track';
  import { TrackContext } from '../../contexts/TrackContext';
  
  const Tracks = () =&gt; {
    const { heading, tracks } = useContext(TrackContext);
  
    const tracksList = tracks.map(trackInfo =&gt; {
      return &lt;Track trackInfo={trackInfo} key={trackInfo.track.track_id} /&gt;;
    });
    return (
      &lt;Fragment&gt;
        &lt;p&gt;{heading}&lt;/p&gt;
        {tracks.length ? &lt;ul&gt;{tracksList}&lt;/ul&gt; : &lt;p&gt;loading...&lt;/p&gt;}
      &lt;/Fragment&gt;
    );
  };
  
  export default Tracks;
  </code></pre>