How to make a single react component which can be used iteratively to display different products. Like an e-commerce website

Question

I'm trying to build a book review website, I have a card component which which has elements like book title, author, year, etc and it is used multiple times to show no. of books, but I don't know how to update each copy of card with different book details every time the card is used and the details are downloaded from the server using Axios.

Answer 1

I'm a little unclear with the question that you're asking but I'll take a shot at it. In react, you should have a main component that renders all of the cards (i.e BookReviews). That component should have an internal state, perhaps an array of objects that hold a review. You should fetch that array from Flask when the component mounts and then you should render each card individually.

For example:

const BookReview = ({review: {id, name, rating}) => {
   return (
      <div className="card">
          {name}
      </div>
   );
}

const BookReviews = () => {
   const [reviews, setReviews] = React.useState([]);
   
   React.useEffect(() => {
      // fetch reviews using ajax request and call setReviews with result
   })


   return (
      <div className="book-reviews">
      {reviews.map(i => <BookReview key={i.id} review={i} />}
      </div>
   );
}

Then in your flask app, have a route to retrieve all of the reviews from the database and return them in a serialized format:

@app.route('/reviews')
def book_reviews():
   return jsonify(reviews=[{'id': i.id, 'name': i.name, 'stars': i.stars} for i in BookReview.query.all()]), 200