React list and 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
		})
	}

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

export default App;

Book.js

import React, { Component } from 'react'

class Book extends Component{

	render(){
		return (
			<li className="list-group-item d-flex">
				<p>{this.props.name} </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>
			</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 } id={val.id} name={val.name} price={val.price} />
					})
				}
			</ul>
		);
	}
}

export default Books;