How can I get this React Bootstrap Modal Working properly?

Question

I have a exercise I am working on/attempting to replicate and I am trying to add a modal button to the file. I have the button and the modal from React Bootstrap, however, I am unable to get the actual modal to show up. I was using the documentation from React-Bootstrap but getting the actual modal to come up is not working, I have tried to import the various modals but to no avail, am I missing something in my code?

import React from 'react';
import { Modal, Form, FormControl, Button, ButtonToolbar, InputGroup } from 'react-bootstrap';
import { connect } from 'react-redux';

import { addItem } from '../actions/itemActions';


function ItemModal(props) {

return (
  <div>
    <Button
      variant="dark"
      style={{marginBottom: '2em'}}
    >Add Item
    </Button>

    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
    <Modal.Header closeButton>
      <Modal.Title id="contained-modal-title-vcenter">
        Add to Shopping List
      </Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <Form>
        <Form.Label for="item">Item</Form.Label>
        <InputGroup className="mb-3">
          <FormControl
            type="text"
            name="name"
            id="item"
            aria-label="Add Shopping Item"
            aria-describedby="basic-addon2"
          />
        <InputGroup.Append>
          <Button onClick={props.onHide} variant="outline-dark">Add</Button>
        </InputGroup.Append>
      </InputGroup>
    </Form>
  </Modal.Body>
</Modal>
</div>
);
}

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


return (
<ButtonToolbar>
  <Button variant="dark" onClick={() => setModalShow(true)}>
    Add Item
  </Button>

  <ItemModal
    show={modalShow}
    onHide={() => setModalShow(false)}
  />
</ButtonToolbar>
);
}


export default connect()(ItemModal);

I do have this extra bit of code that I though would function to open the modal but I don't think it works with this version of Bootstrap?

 state = {
  modal: false,
  name: ''
 }

 toggle = () => {
  this.setState({
  modal: !this.state.modal
 });
};

 onChange = (e) => {
  this.setState({ [e.target.name]: e.target.value });
 }

Answer 1

From your code snippet, I found an issue.

You have 2 component's in a single file, App and ItemModal. From which App component is your base / parent component and ItemModal is your child component.

But you are exporting child compoennt,

export default connect()(ItemModal);

You should export the parent component,

export default connect()(App);