React: List and Event, edit, keypress event practice

App.js

import React, { Component } from 'react'
import './App.css';
import Books from './Books/Books';

class App extends Component{
	state = {
		books: [
			{
				id: 1,
				name: 'Rich dad',
				price: 50
			},
			{
				id: 3,
				name: 'Think and grow rich',
				price: 120
			},
			{
				id: 5,
				name: 'Power of positive thinking',
				price: 220
			}
		]
	}

	deleteHandler = (id) => {
		let newBooks = this.state.books.filter((val) => id !== val.id)
		this.setState({
			books: newBooks
		})
	}

	changeHandler = (id, name) => {
		console.log(name)

		let newBooks = this.state.books.map((book) => {
			if(id === book.id){
				return {
					...book,
					name: name
				}
			}

			return book
		})

		this.setState({
			books: newBooks
		})
	}

	render(){
		return (
			<div className="App">
				<Books
					deleteHandler={ this.deleteHandler } 
					books={ this.state.books }
					changeHandler={ this.changeHandler } />
			</div> 
		);
	}
}

export default App;

Book.js

import React, { Component } from 'react'

class Book extends Component{
	state = {
		isEditable: false
	}

	changeKeyHandler = (event) => {
		if(event.key === 'Enter'){
			this.setState({isEditable: false})
		}
	}

	render(){
		let output = this.state.isEditable ? (
			<input
				type="text"
				onChange={ e => this.props.changeHandler(this.props.id, e.target.value) }
				onKeyPress={ this.changeKeyHandler }
				value={ this.props.name } />
			) : (
				this.props.name
			)
				

		return (
			<li className="list-group-item d-flex">
				<p> { output } </p>
				<span className="ml-auto">{ this.props.price }$ </span>
				<span className="mx-4" onClick={ () => this.props.deleteHandler(this.props.id) }><i className="fa fa-trash"></i></span>
				<span className="mx-4" onClick={ () => this.setState({ isEditable: true }) }><i className="fa fa-edit"></i></span>
			</li> 
		);
	}
}

export default Book;

Books.js

import React, { Component } from 'react'
import Book from '../Books/Book'

class Books extends Component{

	render(){
		return (
			<ul>
				{
					this.props.books.map((val, i) => {
						return(
							<Book 
								deleteHandler={ this.props.deleteHandler }
								changeHandler={ this.props.changeHandler }
								id={val.id}
								name={val.name}
								price={val.price}
							/>
						)
						
					})
				}
			</ul>
		);
	}
}

export default Books;