Reputation: 85
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