text: import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  /* Using .filter()
   *
   * Using the musicData array and .filter():
   *   - return only album objects where the album's name is
   *     10 characters long, 25 characters long, or anywhere in between
   *   - store the returned data in a new `results` variable
   *
   * Note:
   *   - do not delete the musicData variable
   *   - do not alter any of the musicData content
   */
  
  const musicData = [
      { artist: 'Adele', name: '25', sales: 1731000 },
      { artist: 'Drake', name: 'Views', sales: 1608000 },
      { artist: 'Beyonce', name: 'Lemonade', sales: 1554000 },
      { artist: 'Chris Stapleton', name: 'Traveller', sales: 1085000 },
      { artist: 'Pentatonix', name: 'A Pentatonix Christmas', sales: 904000 },
      { artist: 'Original Broadway Cast Recording',
        name: 'Hamilton: An American Musical', sales: 820000 },
      { artist: 'Twenty One Pilots', name: 'Blurryface', sales: 738000 },
      { artist: 'Prince', name: 'The Very Best of Prince', sales: 668000 },
      { artist: 'Rihanna', name: 'Anti', sales: 603000 },
      { artist: 'Justin Bieber', name: 'Purpose', sales: 554000 }
  ];
  
  const results = musicData.filter( object => object.name.length >= 10 && object.name.length <= 25 );
  
  console.log(results);
  
  class App extends Component {
    render() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
        </div>
      );
    }
  }
  
  export default App;
  