Modal Not Appearing onClick

Question

I am creating a modal in React that will allow users to add an item to a table. I create a RecipeModal component with a form inside, and I receive no errors when compiling, yet nothing happens when I click the button. I followed a tutorial very closely and have run out of ideas. I've seen people have issues with 'fade' in React that turns the modal completely clear and therefor invisible, but I tried checking in "Inspect" (DevTools? I'm am not sure what it is called) for 'modal' and didn't see it there. I am very new to web developing, so let me know if I should attach something else. I had more input field, but removed them while trying to fix this.

import React, { Component } from 'react';
import { Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Label, Input } from 'reactstrap';

import { connect } from 'react-redux';
import { addRecipe } from '../action/recipeActions';

class RecipeModal extends Component {

  state = {
    modal: false,
    recipe_name: '',
    recipe_description: '',
    recipe_ingredients: '',
    recipe_steps: ''
  }
  toggle = (e) => {
    this.setState({
      modal: !this.state.modal
    });
  }
  onChange = (e) => {
    this.setState(
      { [e.target.recipe_name]: e.target.value }
    );
  }

  render() {

    return (
      <div>
        <Button
          color="dark"
          style={{ marginBotton: '2rem' }}
          onClick={this.toggle}
        >Add Recipe</Button>

        <Modal
          isOpen={this.state.Modal}
          toggle={this.toggle} >
          <ModalHeader toggle={this.toggle}>Add a New Recipe</ModalHeader>
          <ModalBody>
            <Form onSubmit={this.onSubmit}>
              <FormGroup>
                <Label for="recipe">Recipe</Label>
                <Input
                  type="text"
                  recipe_name="recipe_name"
                  id="recipe"
                  placeholder="Add recipe name"
                  OnChange={this.onChange} />

              </FormGroup>
            </Form>
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

export default connect()(RecipeModal);

Answer 1

State is case-sensitive. So it's either you rename your modal state to Modal

state = {
  Modal: false,
  ...
};

or refactor the isOpen prop to <Modal isOpen={this.state.modal} toggle={this.toggle}>

I suggest the latter.