How to add or show multiple items in reactjs carousel?

Question

I am trying to show multiple items in my carousel by adding a list of some filter names, but all I can see is only one at a time,

I want to achieve something like this as shown in the image, ie by default it should show 4 names and then a user clicks the next, and so on.

What I want to show:

I do not know what did I do wrong or what I missed. Can someone please check the code and let me know what corrections are to be made and why is this happing in the first place?

Please the source code below:

import React, { useState } from "react";

import { Button, makeStyles } from "@material-ui/core";

import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";

const useStyles = makeStyles((theme) => ({
  filter: {
    width: "95%",
    height: "25px",
    margin: "auto",
    marginTop: "5px",
    padding: "5px",
    border: "solid 1x white",
    borderRadius: "5px",
    display: "flex",
    color: "black",
    boxShadow: " 0px 2px 3px gray",
    justifyContent: "center",
    alignItems: "center"
  }
}));
const Filter = () => {
  const classes = useStyles();

  const [currentFilter, setCurrentFilter] = useState(0);

  const filterList = [
    {
      id: "1",
      title: "Action"
    },
    {
      id: "2",
      title: "Adventure"
    },
    {
      id: "3",
      title: "Comedy"
    },
    {
      id: "4",
      title: "Documentary"
    },
    {
      id: "5",
      title: "Drama"
    },
    {
      id: "6",
      title: "Family"
    },
    {
      id: "7",
      title: "Fantasy"
    },
    {
      id: "8",
      title: "History"
    },
    {
      id: "9",
      title: "Horror"
    },
    {
      id: "10",
      title: "Music"
    },
    {
      id: "11",
      title: "Mystery"
    },
    {
      id: "12",
      title: "Romance"
    },
    {
      id: "13",
      title: "Sci-Fi"
    }
  ];
  const length = filterList.length;

  const nextFilter = () => {
    setCurrentFilter(currentFilter === length - 1 ? 0 : currentFilter + 1);
  };

  const prevFilter = () => {
    setCurrentFilter(currentFilter === 0 ? length - 1 : currentFilter - 1);
  };
  console.log(currentFilter);

  if (!Array.isArray(filterList) || filterList.length <= 0) {
    return null;
  }

  return (
    <>
      <div className={classes.filter}>
        <KeyboardArrowLeftIcon color="inherit" onClick={nextFilter} />
        {filterList.map((FGneres, FGneresId) => (
          <div
            style={{ textAlign: "center", padding: "2px", width: "300px" }}
            key={FGneresId}
          >
            {FGneresId === currentFilter && <Button>{FGneres.title}</Button>}
          </div>
        ))}
        <KeyboardArrowRightIcon color="inherit" onClick={prevFilter} />
      </div>
    </>
  );
};

export default Filter;

Link for codeSandbox Source Code with Demo

The result I see now is as shown in the image below:

Thanks a million for help.

Answer 1

currentFilter returns only one number, so if you compare FGneresId to currentFilter it returns only one element beacuse only one FGneresId is equel to currentFilter