title: Checking if array element exists in another array
body: <p>I am working on a React JS application, which is a match score predicting app.</p>
  
  <p>With the following code the app currently displays a list of upcoming matches for which the user can click on and enter a prediction.</p>
  
  <pre><code>if(!this.props.loading &amp;&amp; !this.props.error){
  upcomingmatches = this.props.upcmgMatches.map(upcomingMatch =&gt; {
      return &lt;UpcomingMatch
          key={upcomingMatch.id}
          teamA={upcomingMatch.teamA}
          teamB={upcomingMatch.teamB}
          matchKickoff={upcomingMatch.matchKickoff}
          clicked={() =&gt; this.addInitInputMatchResultHandler(upcomingMatch.id, upcomingMatch.teamA, upcomingMatch.teamB, upcomingMatch.matchKickoff)}
      /&gt;
  });
  }
  </code></pre>
  
  <p>I want to modify it so that if a user has already made a prediction for a match then it will display the  component but with 
  additional info e.g. their current predictions.</p>
  
  <p>My component has access to two object arrays which are received from a Firebase table and turned into arrays.</p>
  
  <p><code>upcmgMatches</code> shows all the current upcoming matches that a user can make a prediction for.</p>
  
  <p><code>userPredictions</code> shows all the matches that the user had made predictions for that have still not been played. So this could include all matches in <code>upcmgMatches</code> if they've made predictions for all of them or just a subset of these matches or I guess an empty array if they haven't made any predictions.</p>
  
  <p>These arrays are shown below.</p>
  
  <p>So <code>id</code> from <code>upcmgMatches</code> should be matched with <code>matchID</code> in <code>userPredictions</code></p>
  
  <pre class="lang-js prettyprint-override"><code>upcmgMatches = [{
      "matchKickoff": "2018-09-22T10:45",
      "teamA":"Roosters",
      "teamB":"Dragons",
      "id":"-LN-pNFv-rFJQkunM1Tv"
    },  
    {
      "matchKickoff": "2018-09-22T19:00",
      "teamA": "Storm",
      "teamB": "Sharks",
      "id": "-LMrXWzcEjN_u_jlULuJ"
    }]
  
  userPredictions = [{
      "matchID": "-LMrXWzcEjN_u_jlULuJ",
      "teamAName": "Storm",
      "teamAScore": "22",
      "teamBName": "Sharks",
      "teamBScore": "12",
      "userId": "J2QO4OHT5vc7aAkT9vcdREo1IuW2",
      "id": "-LMvzSoaMAhBUhgWMOpM"
    }]
  </code></pre>
  
  <p>So I think my modified logic would be ..</p>
  
  <p>For each match in <code>upcmgMatches</code>, check whether the <code>id</code> exists in <code>userPredictions</code> on the <code>matchID</code> field, if it does then return the UpcomingMatch component with the additional info from userPredictions namely TeamAScore and teamBScore. If it doesn't then just return the info from <code>upcmgMatches</code>, which should be the same but without predicted scores.</p>