Modal not activating due to Prop

Only the state is passed to the modal

<NavigationBar modal={this.state}/>

But you should pass both the isModalOpen state and the toggleModal callback. I suggest passing them individually for readability and maintenance.

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false
    };

    this.toggleModal = this.toggleModal.bind(this);
  }

  toggleModal() {
    this.setState({ isModalOpen: !this.state.isModalOpen });
  }

  render() {
    return (
      <NavigationBar
        isModalOpen={this.state.isModalOpen}
        toggleModal={this.toggleModal}
      />
    );
  }
}

Modal

function NavigationBar(props) {
  return (
    <React.Fragment>
      <Navbar dark sticky="top" expand="md">
        <div className="container">
          <NavbarBrand className="mr-auto">
            <img
              src="../images/compLogo.jpg"
              width="30"
              height="30"
              alt="company logo"
            />
          </NavbarBrand>
          <NavbarToggler />
          <Collapse navbar>
            <Nav navbar>
              <Button
                className="nav-link buttonModal"
                onClick={props.toggleModal} // <-- access props.toggleModal
              >
                <i className="fa fa-address-book fa-lg" /> Contact Us
              </Button>
            </Nav>
          </Collapse>
        </div>
      </Navbar>

      <Modal
        isOpen={props.isModalOpen} // <-- access props.isModalOpen
        toggle={props.toggleModal} // <-- access props.toggleModal
      >
        <ModalBody>
          <Form>
            <FormGroup>
              <Label htmlFor="name">Name</Label>
              <Input type="text" />
            </FormGroup>
          </Form>
        </ModalBody>
      </Modal>
    </React.Fragment>
  );
}

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top