Carousel of components in React?

Question

I'm building a website with React and for the "news" section i have a list of 3 components representing the different news. They belong to a flexbox and I'm trying to make them responsive. For mobile devices i would want only one of the 3 components to be shown with the ability of clicking 2 arrows to go through the news. Like a normal image carousel, but made of components. How can I achieve this? These are the components

The code where i put all the "news"

  render() {
let content = <div>Loading...</div>;
if (!this.state.isLoading) {
  content = (
    <Aux>
      <New
        image={img1}
        title={this.state.news[0].title}
        text={this.state.news[0].text}
        date={this.state.news[0].date}
        classes="new-1"
      />
      <New
        image={img2}
        title={this.state.news[1].title}
        text={this.state.news[1].text}
        date={this.state.news[1].date}
        classes="new-2"
      />
      <New
        image={img3}
        title={this.state.news[2].title}
        text={this.state.news[2].text}
        date={this.state.news[2].date}
      />
    </Aux>
  );
}
return content;

}

This is the "new" component

   const New = props => {
  const imageStyle = {
    backgroundImage: `url(${props.image})`
  };

  return (
    <div className={`new-wrapper ${props.classes}`}>
      <div className="new-image" style={imageStyle}></div>
      <div className="new-content">
        <h4>{props.title}</h4>

        <div className="text-wrapper">
          <p>{props.text}</p>
        </div>

        <div className="date">
          <span>{props.date}</span>
        </div>
      </div>
    </div>
  );
};

Where's your code? It would be even better if you add a codesandbox sample. — SILENT, Feb 27 '20 at 19:25

score 0 · Answer 1 · answered Feb 27 '20 at 21:47

To achieve your desired result I would use a carousel plugin like https://react-slick.neostack.com/

You could set it to show three slides on desktop and just one on mobile so then you would get the arrows to go through the news cards.

I would also loop every element of the array by using the map function to render all the news. That way it would dynamically create a news card for every element on your state or array. See this example How to render an array of objects in React?

Hope this helps!

Carousel of components in React?

1 Answers1