Warnings with using modals from reactstrap

user_12358295 0
Viewed 1250

I have some warnings:

Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: Transition

and

Warning: 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 in ...

which I didn't have like a month ago.

<Modal
   style={{position: "relative",
   top: "50%",
   transform: "translateY(-50%)"}}
   className="fadein-elements"
   isOpen={modal}
   toggle={toggle}
>
   <ModalHeader toggle={toggle}>Add Post</ModalHeader>
   <ModalBody>
      <Form onSubmit={onSubmit}>
         <FormGroup>
            <Label for="subject">Subject</Label>
            <Input
               type="text"
               name="subject"
               id="subject"
               placeholder="Add Subject..."
               onChange={onChange}
           />
             <Label for="content">Content</Label>
             <Input
               type="textarea"
               name="content"
               id="content"
               placeholder="Add content..."
               onChange={onChange}
            />
            <Button
               color="dark"
               style={{ marginTop: '2rem' }}
               block>
               Add Post
            </Button>
        </FormGroup>
      </Form>
   </ModalBody>
 </Modal>

App works fine, but I always want to clear all warnings in correct way. I assume that I have to add transition Component from react-transition-group, however I prefer to do all my transitions and animations in CSS(which for me works much better with react-waypoint). My React version is 16.13.1

Well finally, I have two questions.

1) What is the purpose of this warning, it means why it is deprecated?

2) Where should I insert this react-group-transition Transition or how should I change this Modal to clear the errors?

strict-mode bootstrap-modal reactjs transition node.js
1 Answers

I had the same issue while using Bootstrap 5 within NextJS. So I'm not sure if this is the same way you arrived at this, as you haven't mentioned, but if it's similar, you can use the same solution.

The warning is caused by not adding the CSS & JS Bundle from Bootstrap. I edited my _app.js file as below and it did the trick.

import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Script from 'next/script'

// add bootstrap css
import 'bootstrap/dist/css/bootstrap.css'

class App extends React.Component {

  render() {
    const { Component, pageProps } = this.props
    return (
      <>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />

          <Link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossOrigin="anonymous"
          />

        </Head>

        <Component {...pageProps} />

        <Script
          id = 'bootstrap'
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossOrigin="anonymous"
        />
      </>
    )
  }
}

export default App
user_152608430
Related