Book Recommendation app using React

aishwaryakaranth

Aishwarya Karanth

Posted on December 25, 2020

Book Recommendation app using React

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.
Alt Text

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

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

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.
Alt Text

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

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

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!

đź’– đź’Ş đź™… đźš©
aishwaryakaranth
Aishwarya Karanth

Posted on December 25, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related