How to add or show multiple items in reactjs carousel?

[tapesh]

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

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

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

[lasjorg]

Post a live example on CodeSandbox.

[tapesh]

Hi @lasjorg

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

Thanks

[lasjorg]

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.

moviehunt-Demo (forked) - CodeSandbox

[kukovisuals]

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

Carousel - CodeSandbox

[tapesh]

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

[tapesh]

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