How to Make a Slider in React JS with Hooks?

Slider in React js has become a necessary thing to have on a website. It can be used in any way like an image slider to showcase all the plans, deals, or clients a company had and can even be used to display feedback/reviews of former clients about the company or some project they had received from you.

In this blog, we will discuss how to make a review/ feedback slider with random reviews from scratch in React with the help of Hooks.

Project Setup

Let’s start by creating the Slider React App with the help of your terminal by navigating into the main folder.

When the app is ready, open it in any IDE and run it by typing npm start in your terminal. Your application will be running on localhost 3000.

Select App.js from the src folder, replace the default code with the Boilerplate code of React. Import Data from Data.jsx that contains the data in the array format.

App Component

We will be building a slider that contains random reviews. The data is in the form of an array and is in a different file – Data.jsx that we have already imported.

Let’s complete our UI part first.

import React from 'react'
import Data from "./Data";
const App = () => {
  return (
    <>
       <section className="section">
      <div className="title">
        <h2>
          <span>/</span>reviews
        </h2>
      </div>
      <div className="section-center">
         <div key={id}>
          <img 	src="https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg" alt="Maria Ferguson" className="person-img" />
          <h4>Maria Ferguson</h4>
          <p className="title">Office Manager</p>
          <p className="text">
          Fingerstache umami squid, kinfolk subway tile selvage tumblr man braid viral kombucha gentrify fanny pack raclette pok pok mustache.
          </p>
        </div>
        
        <button className="prev">
        <i className="fas fa-caret-left"></i>
        </button>
        <button className="next">
        <i className="fas fa-caret-right"></i>
        </button>
      </div>
    </section>
 
    </>
  )
}
 
export default App

Applying Hooks – useState

useState() React Hook is used to change the state of our current fields.

 const [state, setState] = useState(0);

Here 0 is the index value of the array which will become the value of the state

We have to define useState too else we will receive an error,

import React, {useState,} from 'react'

Let’s add the data from our Data Component dynamically.

Getting the data from an array can be done using the map method but it will render all of them, and we only want one at a time. Thus we will be using the concept of array destructuring.

const {id, name, image, title, quote} = Data[state];

Keys of the object are destructured

Now, convert and write them as JSX–

 <section className="section">
      <div className="title">
        <h2>
          <span>/</span>reviews
        </h2>
      </div>
      <div className="section-center">
         <div key={id}>
          <img src={image} alt={name} className="person-img" />
          <h4>{name}</h4>
          <p className="title">{title}</p>
          <p className="text">{quote}</p>
        </div>
	        <button className="prev”>
        <i className="fas fa-caret-left"></i>
        </button>
        <button className="next">
        <i className="fas fa-caret-right"></i>
        </button>
      </div>
		 <button className="prev" onClick={Prev}>
        <i className="fas fa-caret-left"></i>
        </button>
 
        <button className="next" onClick={Next}>
        <i className="fas fa-caret-right"></i>
        </button>
 
    </section>

Next, we will be changing the state to what we want to do. Here we want to increase and decrease the index number by one.

But we will receive an error when we go below 0 and above the length of the array. For that, we will use the if/else statement.

 const Next = () => {
    setState((state + 1) % People.length);//increasing the index value
  }
  const Prev = () => {
    const newState = state -1;
    if(newState < 0) {
      setState(People.length-1);
    }
    else {
    setState(state - 1);//decreasing the index value
    }
  }

The final product will look something like this