Как заставить два div встроенных реагировать

Question

// Get a hook function
const {useState, useEffect} = React;

const Slider = props => {
const { innerWidth: width, innerHeight: height } = window;
  const urls = [
    "https://www.imb.com.au/templates/client/images/header/IMB-logo.svg",
    "https://www.mkmcapital.com.au/wp-content/uploads/2016/08/MKM_logo-2.png",
    "https://www.pnbank.com.au/Static/Theme/assets/images/pnbank-logo-narrow--7465fe2f1d3e10cf7acfc008991cebef.svg",
    "https://www.provident.com.au/images/logo-blue.png",
    "https://www.adelaidebank.com.au/globalassets/globalresources/brand-logos/abl-logo.png",
    "https://www.amp.com.au/content/dam/amp-au/data/icons/amp-logo-reversed.svg",
    "https://www.anz.com.au//content/dam/anzconz/images/common/promopages/logo-promo-anz-small.png",
    "https://www.bt.com.au//content/dam/public/btfg-bt/images/logo/bt_financial_group_logo_mob-2x1.png",
    "https://www.commbank.com.au/content/dam/commbank/commBank-logo.svg",
    "https://www.collinshomeloans.com.au/hs-fs/hubfs/collins-logo-shedow.png?width=230&name=collins-logo-shedow.png",
    "https://depositpower.com.au/wp-content/uploads/2019/01/DepositPower_stacked_white.png",
    "https://www.latrobefinancial.com.au//Images/Logos/Logo-LTF_v2.jpg",
    "https://d2ttwt9gu7swv4.cloudfront.net/assets/images/logo.svg",
    "https://www.mebank.com.au/MEBank/Assets/Images/me-logo.svg",
    "https://www.nab.com.au//etc/designs/nabrwd/clientlibs/images/logo.png",
    "https://www.pepper.com.au//siteassets/logos/pepper-money-logo.png",
    "https://www.suncorp.com.au//content/dam/suncorp/corporate/images/logos/Suncorp_New_Logo_2x.png",
    "https://www.equifax.com.au/sites/all/themes/vedacorporate/logo.png"
  ];
  let totalWidth = urls.length * 120;
  let [ left, setLeft ] = useState(0);
  let [ secondLeft, setSecondLeft ] = useState(-(width+300));

  useEffect(() => {
    const interval = setInterval(() => {
      setLeft(left => left + 1);
      setSecondLeft(secondLeft => secondLeft + 1);
      //console.log('left ' + left + ' sleft ' + secondLeft);
      if (left == 0) {
        setSecondLeft(-(totalWidth))
      }
      if(secondLeft == 0){
          setLeft(-(totalWidth))
      }
    }, 5);
    return () => {
      clearInterval(interval);
    };
  }, [left, secondLeft]);

  return (
    <div>
      <div
        style={{
          width: totalWidth + 'px',
          whiteSpace: "nowrap",
          position: "relative",
          top: "0px",
          left: left + "px",
          float: 'left',
          display: 'inline-block'
        }}
      >
        {urls.map((u, i) => {
          return (
            <div style={{ display: "inline-block", padding: "10px" }}>
              <img src={u} width="100px" />
            </div>
          );
        })}
      </div>
      <div
        style={{
          width: totalWidth + 'px',
          whiteSpace: "nowrap",
          position: "relative",
          top: "0px",
          left: secondLeft + "px",
          float: 'right',
          display: 'inline-block',
          background: '#fff'
        }}
      >
        {urls.map((u, i) => {
          return (
            <div style={{ display: "inline-block", padding: "10px" }}>
              <img src={u} width="100px" />
            </div>
          );
        })}
      </div>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Slider/>,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Это как один под другим

Но я хочу, чтобы это было в одной строке. Как я могу это сделать

Answer 1

Использовать метку,

<marquee direction="left" style={{ display:'inline'}}>
  <span
    style={{
      width: { totalWidth },
      display: 'inline-block'
    }}
  >
    {urls.map((u, i) => {
      return (
        <span style={{ padding: "10px" }}>
          <img src={u} width="100px" />
        </span>
      );
    })}
  </span>
  <span
    style={{
      width: { totalWidth },
      display: 'inline-block'

    }}
  >
    {urls.map((u, i) => {
      return (
        <span style={{ padding: "10px" }}>
          <img src={u} width="100px" />
        </span>
      );
    })}
  </span>
</marquee>

Answer 2

Делайте это со стилями, если вы хотите сделать это через js ... хорошо, дайте ему стили с js, но лучше делать это с css

display: flex;
flex-wrap: nowrap;