Invalid prop `children` of type `array` supplied to `Portal`

[renatomarquesteles]

Steps to reproduce the behavior:

"react": "17.0.2" "react-images-viewer": "1.6.5"

import { useState } from 'react';
import ImgsViewer from 'react-images-viewer';
function Images() {
    const [isOpen, setIsOpen] = useState(true);
    const [currentImage, setCurrentImage] = useState(0);
    return (
      <ImgsViewer
        imgs={[
          { src: 'https://via.placeholder.com/550' },
          { src: 'https://via.placeholder.com/450' },
        ]}
        currImg={currentImage}
        isOpen={isOpen}
        onClickPrev={() => setCurrentImage(currIndex => currIndex - 1)}
        onClickNext={() => setCurrentImage(currIndex => currIndex + 1)}
        onClose={() => setIsOpen(false)}
        backdropCloseable
      />
    );
}

Expected behavior: Not showing any error

Actual behavior: It works fine, but there is this error showing on console:

Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Portal`, expected a single ReactElement.

[vkruglikov]

Same error

[guonanci]

Steps to reproduce the behavior:

"react": "17.0.2" "react-images-viewer": "1.6.5"

import { useState } from 'react';
import ImgsViewer from 'react-images-viewer';
function Images() {
    const [isOpen, setIsOpen] = useState(true);
    const [currentImage, setCurrentImage] = useState(0);
    return (
      <ImgsViewer
        imgs={[
          { src: 'https://via.placeholder.com/550' },
          { src: 'https://via.placeholder.com/450' },
        ]}
        currImg={currentImage}
        isOpen={isOpen}
        onClickPrev={() => setCurrentImage(currIndex => currIndex - 1)}
        onClickNext={() => setCurrentImage(currIndex => currIndex + 1)}
        onClose={() => setIsOpen(false)}
        backdropCloseable
      />
    );
}

Expected behavior: Not showing any error

Actual behavior: It works fine, but there is this error showing on console:

Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Portal`, expected a single ReactElement.

Maybe we can upgrade to v1.6.6 to clear this warning?

[renatomarquesteles]

The error persists in v1.6.6 Also appeared another error

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state

Please update the following components: ImgsViewer

thanks for answering

[guonanci]

Can you reproduce this error in @1.6.8, I can't see any error or warning in my examples, please upgrade to @1.6.8 and try it again.

[jsliu27]

"react": "17.0.2" "react-images-viewer": "1.7.1"

import { useEffect, useState } from 'react';
import ImgsViewer from "react-images-viewer";
const [ curViewVarIndex, setCurViewVarIndex ] = useState(0)
const [ viewerIsOpen, setViewerIsOpen ] = useState(false)
<ImgsViewer
          backdropCloseable
          currImg={ curViewVarIndex }
          imgs = { biomes.map(item => { 
              let cap = item.name;
              if (item.label !== "")
                  cap += " (" + item.label + ")";
              if (item.desc !== "")
                  cap += " - " + item.desc;

              return {
              src: item.previewSrc,
              caption: cap
              } 
          })}
          isOpen={viewerIsOpen}
          onClickNext={() => setCurViewVarIndex(curViewVarIndex + 1)}
          onClickPrev={() => setCurViewVarIndex(curViewVarIndex - 1)}
          onClose={() => setViewerIsOpen(false)}
      />

react-dom.development.js:67 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state

Please update the following components: ImgsViewer2