reactjs - Warning: FindNodeDom is deprecated in Strictmode when using Collapse (from react-bootstrap)

Question

I am having an issue with this code in my React project. It would show a div with a warning about filenames to upload.

<Collapse in={this.state.open} id={"z-hover"}>
   <div>
     <ul>
       { FilesAllowed.files.map((fileName, index) => {
         return <li key={index}>{fileName}</li>
       })}
     </ul>
   </div>
</Collapse>

I use a button to display the Collapse element (from react-bootstrap), but when the Collapse gets displayed, console returns this error (I can confirm it comes exactly from the Collapse element):

 findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

Edit: I put my functional code over here in codesandbox.

how could we do to avoid this warning? Thank you for reading:)

question from:https://stackoverflow.com/questions/65861460/warning-findnodedom-is-deprecated-in-strictmode-when-using-collapse-from-react

Answer 1

Waitting for answers