App.jsx

import React from 'react';

import Form from '../../components/Form';
import BooksList from '../../components/BooksList';

class App extends React.Component {
  state = {
    books: [
      {
        title: 'JavaScript and jQuery',
        author: 'Дэвид Сойер Макфарланд',
        year: '2017',
        image: 'https://pp.userapi.com/c840636/v840636793/30188/3ekVfx6ywNA.jpg'
      }
    ],
    editBook: {},
    showForm: false
  };

  showForm = () => {
    this.setState({
      showForm: true
    });
  };

  hideForm = () => {
    this.setState({
      showForm: false
    });
  };

  addBook = (book) => {
    let books = [ ...this.state.books ];
    books.push(book);

    this.setState({
      books: books,
      editBook: {}
    });

    this.hideForm();
  };

  editBook = (book) => {
    this.setState({
      editBook: book
    });
    
    this.showForm();
  };

  removeBook = (removeBook) => {
    let books = [ ...this.state.books ];
    let bookIndex = books.findIndex((book) => {
      return book.title === removeBook.title && book.author === removeBook.author;
    });

    books.splice(bookIndex, 1);

    this.setState({
      books: books
    });
  };

  render() {
    let form = this.state.showForm ?
      <Form
        book={ this.state.editBook }
        hide={ this.hideForm }
        add={ this.addBook }
      /> : null;

    let button = !this.state.showForm ?
      <button
        className="btn btn-primary"
        onClick={ this.showForm }>
        Добавить книгу
      </button> : null;

    let booksList = this.state.books ?
      <BooksList
        books={ this.state.books }
        edit={ this.editBook }
        remove={ this.removeBook }
      /> : null;

    return (
      <div>
        <h1>Книжная полка</h1>
        { form }
        { button }
        { booksList }
      </div>
    );
  }
}

export default App;