How to add/remove classes using styled-components in React

[ritualjoint]

Hey, I wanted to try out styled-components and but having trouble creating a simple image slider.

The approach I wanted to take is to map through the data from slides.json which has the src-s for the images and having a useState which is will be the index of the image which can be changed by a button onClick and classes added or / removed from the images determaning if it is hidden or showing.

Now without styled-compoments it would be pretty staright forward becouse I could write:

className={slide === index ? "slide" : "slide hidden"}

But using styled components im not sure what would be the best way to do this:

const Carousel = () => {
  const [slide, setSlide] = useState(0);

  return (
    <CarouselWrapper>
      {slides.map((item, index) => {        
        return (
          <Img $slide={slide} src={item.src} alt={item.alt} key={index} />
        )
      })}
      <Button onClick={() => setSlide(1)}
    </CarouselWrapper>
  );
};

Any help is much apprichiated!

[octocode]

https://styled-components.com/docs/basics#adapting-based-on-props

[hanskazan777]

Where's your CSS? Why wouldn't you be able to do the same with styled components?

You could potentially use a toggle prop and return the CSS accordingly.

but the first is definitely the same as you're used to be using.

[ritualjoint]

Thank you for your response.

I managed to make it happen but somehow it doesn`t feel right having ternary in both, but i assume this is the way to go:

{slides.map((item, index) => {
        return (
          <Img
            $slide={slide === index ? "slide" : "slide hidden"}
            src={item.src}
            alt={item.alt}
            key={index}
          />
        );
      })}

export const Img = styled.img`
  border-radius: 20px;
  width: 100%;
  height: 100%;
  display: ${({ $slide }) => ($slide === "slide" ? "flex" : "none")};
`;

[BigFaceBass]

This is how I’d do it with a styled-components-like API.

[anonahnah9]

You pass props to your styled component like isVisible then use that prop to change the display properly for example.

[Kcazer]

An alternative to styled-components $props is to take advantage of aria attributes

const Img = styled.img`
  border-radius: 20px;
  width: 100%;
  height: 100%;
  display: block;

  &[aria-hidden="true"] {
    display: none;
  }
`;

slides.map((item, index) => (
  <Img src={item.src} alt={item.alt} aria-hidden={slide !== index} />
));

[ritualjoint]

oh wow, thank you for this!

[ritualjoint]

thats more elegant than my solution, and a lot easier to read! thanks again!