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",
  },

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
  }

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);
    })
  }

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))
  }

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.