How to add or show multiple items in reactjs carousel?

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, i.e. 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);

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

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

export default Filter;

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

test img
The code on sandbox moviehunt-Demo - CodeSandbox
Thanks a million for help.

Post a live example on CodeSandbox.

Hi @lasjorg

Please see the updated code question I have added the link at the bottom for sandbox


Not sure if this has to be render logic. I’m guessing you can implement this in CSS although making the list round-robin would be a little awkward.

Using map and conditional rendering doesn’t seem like the correct approach.

The solution I came up with was to filter the list based on a start and end index that you increment/decrement. Making the list round-robin does create logic that is a little more involved. I may have overlooked an obvious simple solution.

I did come up with the idea at four in the morning and it quickly just became about the implementation and I haven’t actually reassessed the approach.

Here is an example, I used a custom hook just to move the code out of the component, I also added a range (the API is pretty half-baked) and a useMemo for the filtered list just for my own entertainment.

1 Like

Your dependencies didn’t work so I took them out, But you have to play around with the filterList[index]

1 Like

Hi @lasjorg Thanks a million for the help this did work just had to work around but got the solution from your reply.

1 Like

That’s great Thanks a million for the help @kukovisuals it is what the required solution

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.