Krystian Wolański
Krystian Wolański

Reputation: 85

Error after call the react-bootstrap Modal

I tried to use Modal from react-bootstrap after clicked on the context menu list item, but I receive an error. I created a project from Asp Core + react template

npm install react-bootstrap bootstrap

Here is my component where I call bootstrap component:

import React from 'react'
import {MyVerticallyCenteredModal} from './MyVerticallyCenteredModal'

function ContextMenu({left, top}){

    const [modalShow, setModalShow] = React.useState(false);

    return(
        <React.Fragment>
            <ul className="contextMenu" style={{left: left, top: top}}>
                <li onClick={() => setModalShow(true)}>Add Node</li>
                <li>Edit Node</li>
            </ul>

            <MyVerticallyCenteredModal 
                show={modalShow}
                onHide={() => setModalShow(false)}/>
        </React.Fragment>

    )
}

export default ContextMenu

And here is the bootstrap component:

import React from 'react'
import { Modal, Button } from 'react-bootstrap';


export function MyVerticallyCenteredModal(props) {
  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Modal heading
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Centered Modal</h4>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
          consectetur ac, vestibulum at eros.
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}

When I click on the li I got an error:

C:/Users/krysw/source/repos/TreeWithReact/ClientApp/node_modules/@types/react/index.d.ts
TypeScript error in C:/Users/krysw/source/repos/TreeWithReact/ClientApp/node_modules/@types/react/index.d.ts(2835,14):
Duplicate identifier 'LibraryManagedAttributes'.  TS2300

    2833 |         // We can't recurse forever because `type` can't be self-referential;
    2834 |         // let's assume it's reasonable to do a single React.lazy() around a single React.memo() / vice-versa
  > 2835 |         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
         |              ^
    2836 |             ? T extends React.MemoExoticComponent<infer U> | React.LazyExoticComponent<infer U>
    2837 |                 ? ReactManagedAttributes<U, P>
    2838 |                 : ReactManagedAttributes<T, P>

What could be wrong?

Upvotes: 1

Views: 194

Answers (0)

Related Questions