/*
This is a minimal working example
*/

import React, { Component } from 'react';
import Filters from './Filters';
import InputFilter from './InputFilter';
import allMovies from './movies';

class App extends Component {
  state = {
    filters: { title: '' },
  }

  onFilterChange = ({ filters }) => {
    this.setState({ filters });
  }

  render() {
    const { filters } = this.state;
    const movies = allMovies.filter(({ title }) => (
      title.includes(filters.title)
    ))
    return (
      <div>
        <Filters onChange={this.onFilterChange}>
          <InputFilter filterName="title" />
        </Filters>
        <ul>
          {movies.map(({ title }) => <li key={title}>{title}</li>)}
        </ul>
      </div>
    );
  }
}

export default App;