**This is the final solution for this problem**
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
import React, { useLayoutEffect, useRef, useState } from "react"; import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css"; import "swiper/css/free-mode"; import "swiper/css/navigation"; import "swiper/css/thumbs"; import SwiperClass from "swiper/types/swiper-class"; import SwiperCore, { FreeMode, Navigation, Thumbs, Controller } from "swiper";
export default function AdSwiper() { const [thumbsSwiper, setThumbsSwiper] = useState<SwiperCore>(); const [firstSwiper, setFirstSwiper] = useState<SwiperClass>(); const [secondSwiper, setSecondSwiper] = useState<SwiperClass>(); const swiper1Ref = useRef<React.MutableRefObject<null>>(null); const swiper2Ref = useRef();
useLayoutEffect(() => { if (swiper1Ref.current !== null) { swiper1Ref.current.controller.control = swiper2Ref.current; } }, []);
return ( <div className="h-[550px] "> <Swiper onSwiper={(swiper) => { if (swiper1Ref.current !== null) { swiper1Ref.current = swiper; } }} preloadImages={false} controller={{ control: secondSwiper }} spaceBetween={10} slidesPerView={1} grabCursor={true} navigation={true} thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null, }} modules={[FreeMode, Navigation, Thumbs, Controller]} className="w-[848px] h-[454px] rounded-xl" > <SwiperSlide> <img src="https://a.d-cd.net/9634e6s-960.jpg" /> </SwiperSlide>
<SwiperSlide> <img src="https://a.d-cd.net/a5634e6s-960.jpg" /> </SwiperSlide>
<SwiperSlide> <img src="https://a.d-cd.net/13634e6s-960.jpg" /> </SwiperSlide>
<SwiperSlide> <img src="https://a.d-cd.net/e3634e6s-960.jpg" /> </SwiperSlide> <SwiperSlide> <img src="http://carsot.com/images/daewoo-nubira-ii-1999-2003-sedan-interior-2.jpg" /> </SwiperSlide> <SwiperSlide> <img src="https://www.4tuning.ro/images/elemente-caroserie-din-dezmembrari-daewoo-nubira/elemente-caroserie-din-dezmembrari-daewoo-nubira-8fd6c1475ef586f2cf-1100-615-2-85-1.jpg" /> </SwiperSlide> <SwiperSlide> <img src="https://a.d-cd.net/5283186s-480.jpg" className="w-full" /> </SwiperSlide> <SwiperSlide> <img src="https://a.d-cd.net/JCAAAgGDAuA-960.jpg" /> </SwiperSlide> <SwiperSlide> <img src="https://a.d-cd.net/a5634e6s-960.jpg" /> </SwiperSlide> </Swiper> <Swiper controller={{ control: firstSwiper }} loop={false} spaceBetween={10} slidesPerView={8} watchSlidesProgress touchRatio={0.2} preloadImages={false} lazy slideToClickedSlide={true} onSwiper={setThumbsSwiper} modules={[Navigation, Thumbs, Controller]} className="h-[100.4px] w-[848px] mt-[20px] rounded-xl" > <SwiperSlide className="w-[70px]"> <img src="https://a.d-cd.net/9634e6s-960.jpg" className=" rounded-xl h-[70px]" /> </SwiperSlide> <SwiperSlide className="w-[70px]"> <img src="https://a.d-cd.net/a5634e6s-960.jpg" className=" rounded-xl h-[70px]" /> </SwiperSlide> <SwiperSlide className="w-[70px]"> <img src="https://a.d-cd.net/13634e6s-960.jpg" className=" rounded-xl h-[70px]" /> </SwiperSlide> <SwiperSlide className="w-[70px]"> <img src="https://a.d-cd.net/e3634e6s-960.jpg" className=" rounded-xl h-[70px]" /> </SwiperSlide> <SwiperSlide className="w-[70px]"> <img src="http://carsot.com/images/daewoo-nubira-ii-1999-2003-sedan-interior-2.jpg" className=" rounded-xl h-[70px]" /> </SwiperSlide>
<SwiperSlide className="w-[70px]"> <img className=" rounded-xl h-[70px]" src="https://www.4tuning.ro/images/elemente-caroserie-din-dezmembrari-daewoo-nubira/elemente-caroserie-din-dezmembrari-daewoo-nubira-8fd6c1475ef586f2cf-1100-615-2-85-1.jpg" /> </SwiperSlide> <SwiperSlide className="w-[70px]"> <img className=" rounded-xl h-[70px]" src="https://a.d-cd.net/5283186s-480.jpg" /> </SwiperSlide> <SwiperSlide className="w-[70px]"> <img className=" rounded-xl h-[70px]" src="https://a.d-cd.net/JCAAAgGDAuA-960.jpg" /> </SwiperSlide> <SwiperSlide className="w-[70px]"> <img src="https://a.d-cd.net/a5634e6s-960.jpg" className=" rounded-xl h-[70px]" /> </SwiperSlide> </Swiper> </div> ); }

<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<!-- end snippet -->

That's [*property spread notation*][1]. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "[JSX spread attributes][2]" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" enumerable properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar&nbsp;&mdash; the good kind&nbsp;&mdash; for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component { render() { const { className, children } = this.props; return ( <div className={className}> {children} </div> ); } } ReactDOM.render( [ <Example className="first"> <span>Child in first</span> </Example>, <Example className="second" children={<span>Child in second</span>} /> ], document.getElementById("root") );
<!-- language: lang-css -->
.first { color: green; } .second { color: blue; }
<!-- language: lang-html -->
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object&nbsp;&mdash; which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => { return {foo: {...prevState.foo, a: "updated"}}; });
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = { foo: { a: 1, b: 2, c: 3 } }; console.log("original", obj.foo); // Creates a NEW object and assigns it to `obj.foo` obj.foo = {...obj.foo, a: "updated"}; console.log("updated", obj.foo);

<!-- language: lang-css -->
.as-console-wrapper { max-height: 100% !important; }
<!-- end snippet -->

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax [2]: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes