DEV Community

Cover image for Project 83 of 100 - Customer Reviews App in React
James Hubert
James Hubert

Posted on

1

Project 83 of 100 - Customer Reviews App in React

Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: Link
Link to the repo: github

This is part 3 of 15 in a series on building React projects by John Smilga, covered in this 10 hour video on Youtube.

I'm enjoying these projects from John because they are incremental. Every project builds on skills learned previously and introduces one or two new things each time.

For this project we learned about the react-icons npm package, which is incredible, and we used the native Javascript Math class to create some random numbers.

In our Review component we import an array of objects from a local file called data. The objects have the following format:

  {
    id: 1,
    name: 'susan smith',
    job: 'web developer',
    image:
      'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg',
    text:
      "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",
  },
Enter fullscreen mode Exit fullscreen mode

I'll assume you know how to create divs, images, and icons in JSX and skip to the Javascript we use onClick for our buttons. Our array of objects is imported and for each we show an image, text, and a few buttons to go to the next review, to the previous review, or a random review.

Since our people array isn't infinitely long, first we create a function to return a different number if the index of the array we are going to switch to when cycling through reviews is outside of the array we get data from:

  const checkNumber = (number) => {
    if (number > people.length -1) {
      return 0
    } 
    if (number < 0) {
      return people.length - 1
    }
    return number
  }
Enter fullscreen mode Exit fullscreen mode

The next thing we do is build our next and previous person functions, which will be triggered when we click the next button or previous button on the review card:

  const nextPerson = () => {
    setIndex((index) => {
      let newIndex = index + 1;
      return checkNumber(newIndex);
    })
  }

  const prevPerson = () => {
    setIndex((index) => {
      let newIndex = index - 1;
      return checkNumber(newIndex);
    })
  }
Enter fullscreen mode Exit fullscreen mode

It's pretty simple logic. If they click next person we add 1 to the index stored in state that accesses the array and renders data on the screen. If they click previous we subtract 1. This has the effect of cycling through the array. We use the checkNumber function on the component to keep the index stored in state within the bounds of the array.

Our randomNumber function is for when we click the 'Random Review' button on the review component. In this function we use the built-in Math.random() method to generate a random number between 0 and 1, then we can get a float in the range of our data array by multiplying the number returned by Math.random() by the length of the array. Finally, we use Math.floor() to round down to the nearest number.

This will return a random whole number that we can use as an index, however we want the user to feel that it really works, so one way to deal with duplicate indexes, which would render no change to the component, is to simply add 1 to the random new number if the randomly generated number is the same as the index. Then, to make sure it falls within the array we run it through the checkNumber() function from earlier.

  const randomPerson = () => {
    let randomNumber = Math.random() * people.length;
    randomNumber = Math.floor(randomNumber)
    if (randomNumber === index) {
      randomNumber = index + 1
    }
    setIndex(checkNumber(randomNumber))
  }

Enter fullscreen mode Exit fullscreen mode

And that's how we create the full effect of our beautiful application!

If you like projects like this and want to stay up to date with more, check out my Twitter @jwhubert91, I follow back! See you tomorrow for another project.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay