The problem is that you are not rendering the bookitem component at all. You have to manage the state of your activePage, pass it to the bookitem and actually render this component.

import React, { useState } from "react";

import { Pagination, Container } from "semantic-ui-react";

import BookItem from "./Book_item";



const PaginationI = () => {

  const [activePage, setActivePage] = useState(0); // manage the state of activePage



  function PageChange(event, data) {

    setActivePage(data.activePage); // update the state in event handler

  }



  return (

    <Container style={{ textAlign: "center", padding: "4rem" }}>

      <BookItem page={activePage} /> {/* render your component */}

      <Pagination

        defaultActivePage={5}

        totalPages={10}

        onPageChange={PageChange} /> {/* pass event handler */}

    </Container>

  );

};



export default PaginationI;

Also you would have to rename the bookitem component due to collision with HTML tags like this

import React from "react";



class BookItem extends Component {

  constructor(props) {

    super(props);



    this.state = {

      counter: 0,

      page: 0,

      data2: [],

    };

  }



  componentWillMount() {

    console.log(this.props.page);

    axios.get("/books/" + this.state.page).then((res) => {

      console.log(res.data);

      this.setState({ data2: res.data });

    });

    console.log("aa");

    console.log(this.state.data2);

  }



  genurl(isbn) {

    console.log(isbn);

    let url = "http://covers.openlibrary.org/b/isbn/" + isbn + "-L.jpg";

    return url;

  }



  render() {

    return (

      <div>

        <div>{this.state.page}</div>

        <Container>

          <div style={{ padding: "1em 1em", textAlign: "right" }}>

            <Card.Group itemsPerRow={3} stackable={true} doubling={true}>

              {this.state.data2.map((card) => (

                <Card href="#">

                  <Image src={this.genurl(card.isbn)} wrapped ui={false} />

                  <Card.Content>

                    <Card.Header>{card.title}</Card.Header>

                    <Card.Meta>

                      <span className="date">Author:{card.author}</span>

                    </Card.Meta>

                    <Card.Content>

                      <Rating

                        icon="star"

                        defaultRating={card.avgrating}

                        maxRating={5}

                      />

                    </Card.Content>

                    <Card.Description>

                      {card.avgrating} Avg rating, {card.totalratings} total

                      ratings.

                    </Card.Description>

                  </Card.Content>

                  <Card.Content>

                    <a>

                      <Icon name="pencil alternate" />

                      {card.reviews} Reviews

                    </a>

                  </Card.Content>

                </Card>

              ))}

            </Card.Group>

          </div>

        </Container>

      </div>

    );

  }

}



export default BookItem;