creating a modal with a button, React, Material UI-CodePudding

this is my first question on here :) I'm relatively new to React and have a simple question. I'm just trying to add a new function that creates a Modal, then call it onClick when you press the add icon (line 43). Thanks! P.S. I already tried a couple different ways and I keep getting white screens :P

export default class Dayview extends Component {
    constructor() {
      super();
  
      this.employees = ['Qwynn'];
      this.hourparams = [9,19];
      this.weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
      this.months = ['January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December'];
  
      this.state = {
        currentDay: new Date()
      }
    }
  
    changeCurrentDay = (day) => {
      this.setState({ currentDay: new Date(day.year, day.month, day.number) });
    }
  
    nextMonth = () => {
      this.setState({ currentDay: new Date(this.state.currentDay.setDate(this.state.currentDay.getDate()   28)) });
    }
  
    previousMonth = () => {
      this.setState({ currentDay: new Date(this.state.currentDay.setDate(this.state.currentDay.getDate() - 28)) });
    }

    addAppt = () => {
      
    }
  
    render() {
      return (
        <div>
            <div className="dayview-header">
            <div className="title">
            <h2>{this.months[this.state.currentDay.getMonth()]} {this.state.currentDay.getFullYear()}</h2>
          </div>
          <div className="tools">
          <button onClick={this.previousMonth}>
              <AddBoxIcon className="material-icons"/>
            </button>
            <button onClick={this.previousMonth}>
              <ArrowBackIcon className="material-icons"/>
            </button>
            <p>{this.months[this.state.currentDay.getMonth()].substring(0, 3)} {this.state.currentDay.getDate()}</p>
            <button onClick={this.nextMonth}>
              <ArrowForwardIcon className="material-icons"/>
            </button>
          </div>
            </div>
            <DayviewHours />
        </div>
        
      )
    }
  }

CodePudding user response：

Because you are using class component, first you need to declare/initialize an open object inside your this.state constructor to control whether the modal is open or close. Its default should be false,

this.state = {
  currentDay: new Date(),
  open: false
};

In the Modal component, you could pass in the open state as a prop to control the modal,

<Modal
    open={this.state.open}
    onClose={this.handleClose}
>

Here is your button,

<button onClick={this.handleOpen}>
     <AddBoxIcon className="material-icons" />
</button>

To open the modal,

handleOpen = () => {
    this.setState({ open: true });
};

To close the modal you could use the onClose prop given by the MUI doc,

Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose

  handleClose = () => {
    this.setState({ open: false });
  };

Full code here in codesandbox: Demo