title: ReactJS Error when using map function, cannot read properties of undefined
body: <p>I'm trying to make a sport/tinder like app for a school project from a friend of mine. It came together well on my localhost, but for him it was a requirement to host it online. Not really a professional in hosting, but I was a bit familiar with Heroku. I used a client and a server side for my application, so I build the client side and put it into the server side folder. This server side is hosted on the Heroku page. But whenever I try to login, it won't work and I get this error message in my console.</p>
  <pre><code>TypeError: Cannot read properties of undefined (reading 'map')
  </code></pre>
  <p>The error says it is caused by this line of code.</p>
  <pre><code>const matchedUserIds = matches.map(({user_id}) =&gt; user_id)
  </code></pre>
  <p>This is the whole MatchDisplay file that is used in my Dashboard. I'm using a MongoDB for the storage of my users.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import axios from "axios";
  import { useEffect, useState } from "react";
  import { useCookies } from "react-cookie";
  
  const MatchesDisplay = ({ matches, setClickedUser }) =&gt; {
      const [matchedProfiles, setMatchedProfiles] = useState(null);
      const [cookies, setCookie, removeCookie] = useCookies(null);
      const [matched, setMatched] = useState(null);
  
      const matchedUserIds = matches.map(({ user_id }) =&gt; user_id);
  
      const userId = cookies.UserId;
  
      const getMatches = async () =&gt; {
          try {
              const response = await axios.get(
                  "https://[app].herokuapp.com/users",
                  {
                      params: { userIds: JSON.stringify(matched()) },
                  }
              );
              setMatchedProfiles(response.data);
          } catch (error) {
              console.log(error);
          }
      };
  
      useEffect(() =&gt; {
          getMatches();
      }, [matches]);
  
      const filteredMatchedProfiles = matchedProfiles?.filter(
          (matchedProfile) =&gt;
              matchedProfile.matches.filter(
                  (profile) =&gt; profile.user_id === userId
              ).length &gt; 0
      );
  
      return (
          &lt;div className="matches-display"&gt;
              {filteredMatchedProfiles?.map((match) =&gt; (
                  &lt;div
                      key={match.user_id}
                      className="match-card"
                      onClick={() =&gt; setClickedUser(match)}
                  &gt;
                      &lt;div className="img-container"&gt;
                          &lt;img
                              src={match?.url}
                              alt={match?.first_name + "profile"}
                          /&gt;
                      &lt;/div&gt;
                      &lt;h3&gt;{match?.first_name}&lt;/h3&gt;
                  &lt;/div&gt;
              ))}
          &lt;/div&gt;
      );
  };
  export default MatchesDisplay;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help is welcome. If you need more code examples, please reply ;)</p>
  <p><strong>EDIT</strong></p>
  <p>The ChatContainer that passes the user to the MatchesDisplay.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import ChatHeader from "./ChatHeader";
  import MatchesDisplay from "./MatchesDisplay";
  import ChatDisplay from "./ChatDisplay";
  import { useState } from 'react';
  
  const ChatContainer = ({user}) =&gt; {
      const [ clickedUser, setClickedUser] = useState(null)
  
      return (
          &lt;div className="chat-container"&gt;
              &lt;ChatHeader user={user}/&gt;
  
              &lt;div&gt;
                  &lt;button className="option" onClick={() =&gt; setClickedUser(null)}&gt;Matches&lt;/button&gt;
                  &lt;button className="option" disabled={!clickedUser}&gt;Chat&lt;/button&gt;
                  &lt;button className="option" &gt;Prices&lt;/button&gt;
              &lt;/div&gt;
  
              {!clickedUser &amp;&amp; &lt;MatchesDisplay matches={user.matches} setClickedUser={setClickedUser}/&gt;}
  
              {clickedUser &amp;&amp; &lt;ChatDisplay user={user} clickedUser={clickedUser}/&gt;}
          &lt;/div&gt;
      )
  }
  
  export default ChatContainer</code></pre>
  </div>
  </div>
  </p>
  <p>The Dashboard that passes the user to the Chatcontainer.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import TinderCard from 'react-tinder-card';
  import {useEffect, useState} from 'react';
  import {useCookies} from 'react-cookie';
  import ChatContainer from '../components/ChatContainer'
  import axios from "axios";
  
  const Dashboard = () =&gt; {
      const [user, setUser] = useState(null)
      const [genderedUsers, setGenderedUsers] = useState(null)
      const [lastDirection, setLastDirection] = useState(null)
      const [cookies, setCookie, removeCookie] = useCookies(['user'])
      const [matchedUserIds, setMatchedUserIds] = useState(null)
      const [filteredGenderedUsers, setFilteredGenderedUsers] = useState(null)
  
      const userId = cookies.UserId
      const getUser = async () =&gt; {
          try {
              const response = await axios.get('https://funfit-webpage.herokuapp.com/user', {
                  params: {userId}
              })
              return setUser(response.data)
          } catch (error) {
              console.log(error)
          }
      }
      const getGenderedUsers = async () =&gt; {
          try {
              const response = await axios.get('https://funfit-webpage.herokuapp.com/gendered-users', {
                  params: {gender: user?.gender_interest}
              })
              return setGenderedUsers(response.data)
          } catch (error) {
              console.log(error)
          }
      }
  
      useEffect(() =&gt; {
          getUser()
      }, [])
  
      useEffect(() =&gt; {
          setMatchedUserIds(user?.matches.map(({user_id}) =&gt; user_id).concat(userId))
          if (user) return getGenderedUsers()
      }, [user])
  
      useEffect(() =&gt; {
          if (genderedUsers) {
              return setFilteredGenderedUsers(genderedUsers?.filter(
                  genderedUser =&gt; !matchedUserIds.includes(genderedUser.user_id)
              ))
          }
      }, [genderedUsers])
  
      const updateMatches = async (matchedUserId) =&gt; {
          try {
              await axios.put('https://funfit-webpage.herokuapp.com/addmatch', {
                  userId,
                  matchedUserId
              })
              return getUser()
          } catch (error) {
              console.log(error)
          }
      }
  
      const swiped = (direction, swipedUserId) =&gt; {
          console.log(direction, swipedUserId)
          if (direction === 'right') {
              updateMatches(swipedUserId)
          }
          return setLastDirection(direction)
      }
  
      const outOfFrame = (name) =&gt; {
          console.log(name + ' left the screen!')
      }
  
  
      return (&lt;&gt;
          {user &amp;&amp; &lt;div className="dashboard"&gt;
              &lt;ChatContainer user={user}/&gt;
              &lt;div className="swipe-container"&gt;
                  &lt;div className="card-container"&gt;
                      {filteredGenderedUsers?.map((genderedUser) =&gt;
                          &lt;TinderCard
                              className='swipe'
                              key={genderedUser.user_id}
                              onSwipe={(dir) =&gt; swiped(dir, genderedUser.user_id)}
                              onCardLeftScreen={() =&gt; outOfFrame(genderedUser.first_name)}&gt;
                              &lt;div style={{backgroundImage: 'url(' + genderedUser.url + ')'}} className='card'&gt;
                                  &lt;h3&gt;{'Name: ' + genderedUser.first_name} &lt;br/&gt; {'Sport: ' + genderedUser.about}&lt;/h3&gt;
                              &lt;/div&gt;
                          &lt;/TinderCard&gt;)}
                      &lt;div className="swipe-info"&gt;
                          {lastDirection ? &lt;p&gt;You swiped {lastDirection}&lt;/p&gt; : &lt;p/&gt;}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;}
      &lt;/&gt;)
  }
  export default Dashboard</code></pre>
  </div>
  </div>
  </p>