Width of slides isn't set if the slide is React component

If I do a regular slide, per docs, everything works fine:

    <Swiper>
      <div className="slide">Awesome slide</div>
      <div className="slide">Awesome slide</div>
      <div className="slide">Awesome slide</div>
    </Swiper>

However, if I try to encapsulate the slide in a component, like so:

        function MyComponent(props) {
          return <div className="slide">Awesome slide</div>
        }

        <Swiper>
          <MyComponent/>
          <MyComponent/>
          <MyComponent/>
        </Swiper>

Then the whole Swiper gets broken - I see all slides at once. It seems to be happening because Swiper doesn’t set the width of the div inside the components in this case.

The only solution I found is something like that:

    <Swiper>
      <div><MyComponent/></div>
      <div><MyComponent/></div>
      <div><MyComponent/></div>
    </Swiper>

I thought that perhaps MyComponent would be getting the width as a prop and I could propagate to its children. However, there is no such prop.

Since I assume the issue stems from the original, non-react, library, how about a fix that does the following:

• Goes over every provided child
• Wraps it in a div

Source https://github.com/vitalybe/react-test/tree/react-id-swiper

Screenshot of the issue

[vitalybe]

Yeah, I did it in a more generic way though eventually:

class FixedSwiper extends Component {
  render() {
    return (
      <Swiper>
        {this.props.children.map(child => {
          return <div>{child}</div>;
        })}
      </Swiper>
    );
  }
}

So I can use it like so:

    <FixedSwiper>
      <MyComponent />
      <MyComponent />
      <MyComponent />
    </FixedSwiper>

Source: https://github.com/vitalybe/react-test/blob/2b0c45d08fa5579fdb0b6312fcfa7b518608b2b5/src/App.js

[dzek69]

Yeah, wrapping could cause more issues than it solve. Like making SEO issues worse and I’m trying to fix current SEO issues in this PR: https://github.com/kidjp85/react-id-swiper/pull/120

I do it like @vitalybe and it’s working just fine. I’m rendering div in my component and wrapping them with lis when rendering Swiper children.