class CardItem extends Component {

    state = {
        booked: false
    }

    bookmark = (e) => {
        const el = this.props.item
        this.props.send(el)
        this.setState({ booked: true })
    }

    deleteBookMark = (e) => {
        const el = this.props.item
        const docRef = doc(db, 'bookmarks', el.id)
        deleteDoc(docRef)
    }


    render() {
        return (
            <div className="container-card">
                <img name='img' className="img-card" src={`https://image.tmdb.org/t/p/w500/${this.props.item.backdrop_path}`} />
                <p name='title' data-text={this.props.item.title} className="title">{this.props.item.title}</p>
                <p name='type' className="titletype"> {this.props.item.media_type}</p>
                <p name='year'>  {this.props.item.year}</p>
                <button onClick={(e) => this.bookmark(e)} className={this.state.booked ? "bookmarked" : "icon"} name='icon' ><ion-icon name="bookmark-outline"></ion-icon></button>
                <button onClick={(e) => this.deleteBookMark(e)} className="icondelete" name='icon' ><ion-icon name="close-circle-outline"></ion-icon></button>
            </div>

        )
    }
}

export default CardItem

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

class Home extends Component {
    state = {
        listItem: []
    }


    componentDidMount() {

        axios.get('https://api.themoviedb.org/3/trending/all/day?api_key=0a298b024e6a7a2e4b6724e36952cf68')
            .then(item => {
                // console.log(item.data.results)
                let listMovies = []
                item.data.results.forEach(item => {
                    listMovies.push(item)
                })
                this.setState({ listItem: listMovies })
            })
    }



    bookmark = (e) => {
        let book = []
        book = this.state.listItem.filter(item => {
            return item.id === e.id
        })
        addDoc(colRef, {
            userID: auth.currentUser.email,
            movieId: book.map(item => {
                console.log(book)
                return item.id
            })
        })
    }





    render() {
        return (
            <div className='dad1' >
                <NavBar />
                <Logo />

                <div className='dad'>
                    {
                        this.state.listItem.map(item => {
                            return <CardItem delete={this.deleteBook} send={this.bookmark} item={item} key={item.id} id={item.id} />
                        })
                    }
                </div>

            </div>
        )
    }
}

export default Home

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>