title: ReactJS - Array comparison, Render only if name exists in both arrays
body: <p>I am working on a Star Wars web app using ReactJS with data being pulled from the SWAPI (API for returning JSON data about star wars). I have everything working but would like more control over the results that are pulled. Currently <strong>every</strong> character is being pulled from SWAPI, I would like to specify which characters are displayed in my own JSON file and compare this with the results from Swapi.</p>
  
  <p>Here is breakdown of tasks:</p>
  
  <ul>
  <li><p>Use Fetch to pull Star Wars Character information as JSON from SWAPI and to ApiResonse.props.results</p></li>
  <li><p>Add array of specified characters to App state.characters</p></li>
  <li><p>Compare names from App.state.Characters with ApiResponse.results and render list of characters</p></li>
  </ul>
  
  <p><strong>Here is my current code:</strong></p>
  
  <pre><code>/* App */
  class App extends React.Component {
  
      // Set initial state
      constructor() {
          super();
          this.state = {
              characters: [],
          }   
      }
  
      // Add specified characters to App.state.characters
      componentDidMount() {
          this.setState ({
              characters : require('./charnames')
          });
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Navbar/&gt;
                  &lt;Header/&gt;
                  &lt;Characters/&gt;
                  &lt;Footer/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>SWAPI Component</strong></p>
  
  <pre><code>// Uses react-fetch to retrive json from swapi
  class Api extends React.Component{
    render(){
      return (
        &lt;Fetch url="http://swapi.co/api/people/"&gt;
          &lt;ApiResponse test={this.props.results}/&gt;
        &lt;/Fetch&gt;
      )
    }
  }
  
  class ApiResponse extends React.Component{
      render(){
          if (this.props.results) {
              return (
                  {/* I believe my array comparison should occur here */}
                  &lt;div className="row"&gt;
                      {this.props.results.map((key) =&gt;
                          &lt;h1&gt;{key.name}&lt;/h1&gt;
                      )}
                  &lt;/div&gt;
              )
          }
      }
  }
  </code></pre>
  
  <p><strong>App State</strong></p>
  
  <pre><code>Props Empty
  State characters: Array[2]
   0: {name: "Luke Skywalker"}
   1: {name: "Han Solo"}
  </code></pre>
  
  <p><strong>Api Props</strong></p>
  
  <pre><code>Props results: array[10]
   0: {gender: "male", name="Luke Skywalker"}
   1: {gender: "male", name="Han Solo"}
   2: {gender: "female", name="Leia Organa"}
  </code></pre>
  
  <p>So with the results above "Lei Organa" would be omitted as she does not exist in the App State, I hope this question makes sense!</p>
  
  <p>TL;DR - Compare 'names' from App.state.characters with ApiResponse.props.results </p>