Book Recommendation app using React

Aishwarya Karanth — Fri, 25 Dec 2020 03:00:42 +0000

If you love reading books, you can build a React app to recommend all the books you like across various genre using React.js. This is a beginner level React project.
In this book recommendation app, there are two genres- Fiction and Non Fiction. You can add as many genres as you want. When the user clicks a particular genre, a list of books will be recommended along with the rating, description of the book and the link to buy.
Let's build!

Let us create an object to store all our books and store lists of all the books that we'd want to recommend. The code snippet for the same can be seen below.

Let us now convert the object to an array. The syntax for the same is Object.keys(ObjectName).

We will now use useState hook to display one genre by default.

We will now render both the genre on button click using map(). In this case, it will render fiction and non-fiction. On button click, we will call the function bookInputHandler(bookCategory) where we are passing bookCategory as the parameter.

We will now define the bookInputHandler function. In the bookInputHandler function, we will set the bookCategory using useState hook.

We now render all the details of the books in a particular genre that is the title, image, description, link to buy.

And finally, we display the details on the browser using JSX.

We have now built our very own book recommendation app using React.

You can view the finished app here.
You can view the source code for the complete app here.

Thank you for reading!

DEV Community: Aishwarya Karanth

Book Recommendation app using React