title: Reactjs sort and filter component
body: <p>I am new to React. I have implemented the following code for an assignment  have. The goal is to get the list of the movies and when click on a movie to show the opening crawl. I decided to use two components for that because of the styling that had to be done(movies on the left ,crawl on the right).</p>
  
  <p>Now I need two more options: Sort the movies by year or by id and to filter with a search  bar above. </p>
  
  <p>How can that be done in the component?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  
  class StarWarsApp extends React.Component{
      constructor(props){
          super(props);
          this.handleSort = this.handleSort.bind(this);
          this.handleMovies = this.handleMovies.bind(this);
          this.handleClick = this.handleClick.bind(this);
          this.state = {
              movies: [],
              crawl: ['No movie selected']
          }
  
          this.handleMovies();
      }
  
      handleMovies(){
          fetch('"https://swapi.co/api/films"').then(results =&gt; {
              return results.json();
          }).then(data =&gt; {
  
              let movies = data.results;
              console.log(movies);
              this.setState(() =&gt; {
                  return{ 
                      movies: movies 
                  }
              })
          })
      }
  
      handleClick(event){
          fetch('https://swapi.co/api/films'+event.currentTarget.id).then(results =&gt; {
              return results.json();
          }).then(data =&gt; {
              let crawl = data.results.opening_crawl;
              this.setState(() =&gt; {
                  return{ 
                      crawl:crawl 
                  }
              })
          })
      }
  
      render(){
          const title = 'Star Wars';
          return(
              &lt;div&gt;
                  &lt;Header title={title}/&gt;
                  &lt;Sort  handleSort={this.handleSort}/&gt;
                  &lt;Movies handleClick={this.handleClick} movies={this.state.movies}/&gt;
                  &lt;Crawl crawl={this.state.crawl}/&gt;
              &lt;/div&gt;
          )
      }
  }   
  
  
  class Header extends React.Component{
      render(){
          return(
              &lt;div&gt;
                  &lt;h1&gt;{this.props.title}&lt;/h1&gt;
              &lt;/div&gt;
          )
      }
  }
  
  class Movies extends React.Component{
      render(){
          return(
              this.props.movies.map((movie) =&gt; 
              &lt;div onClick={this.props.handleClick} id={movie.episode_id} key={movie.episode_id}&gt;
                  {
                  &lt;p&gt;&lt;Movie title={movie.title}/&gt;&lt;/p&gt; 
                  }
              &lt;/div&gt;
              )
          )
      }
  }
  
  class Movie extends React.Component{
      render(){
          return(
              &lt;div&gt;{this.props.title}&lt;/div&gt;
          )
      }
  }
  
  class Crawl extends React.Component{
      render(){
          return(
              &lt;div className="split right"&gt;
                  {this.props.crawl}
              &lt;/div&gt;
          )
      }
  }
  
  
  export default StarWarsApp;
  </code></pre>