score:2

Accepted answer

your prop name is spelled incorrectly, it should be this.props.isopen also a quick little tip, it is possible to use just one function for opening/closing the modal.

something like this will work:

handletestconnectclick = () => {
    this.setstate(prevstate => ({
      ...prevstate,
      isopen: !prevstate.isopen
    }));
}

here we use our previous state and with the ! operator we switch from true to false and vice versa

update 2.0: after taking a closer look at the material ui documentation, i noticed that your dialog prop for setting the modal visibility is wrong. it should be open instead of isopen.

import testconnectdialog from './testconnectdialog';
class homepage extends react.component {
  constructor(props) {
    super(props);
    this.state = {
      isopen: false
    };
    //this.handletestconnectclick = this.handletestconnectclick.bind(this);
    //this.handleclosedialog = this.handleclosedialog.bind(this);
    // when using arrow functions you don't need to bind the this keyword
  }

  handletestconnectclick = () => {
    this.setstate(prevstate => ({
      ...prevstate,
      isopen: !prevstate.isopen
    }));
  }

  render() {
    return (
      <div classname="section">
        <button classname="connect-test-button"
          // onclick={this.handletestconnectclick}>
          // change the onclick to the one below
          onclick={ () => this.handletestconnectclick() }
          test
         </button>
        <testconnectdialog isopen={this.state.isopen} handletestconnectclick={this.handletestconnectclick}/>
      </div>
    );

  }
};

export default homepage;

in testconnectdialog component:

 class testconnectdialog extends react.component {
  render() {
    return (
      <dialog
          open={this.props.isopen}
          onclose={this.props.handletestconnectclick}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
          >
          <dialogcontent>
              <dialogcontenttext id="alert-dialog-description">
               test
              </dialogcontenttext>
          </dialogcontent>
          <dialogactions classname="dialog-action">
              <button onclick={this.props.handletestconnectclick} classname="primary-button">
              ok
              </button>
          </dialogactions>
      </dialog>
    ); 

  }
};

export default testconnectdialog;

score:0

you're passing the props <testconnectdialog isopen={this.state.isopen} /> but trying to read it with isopen={this.props.isopen}. change your code to this: isopen={this.props.isopen}

score:0

update testcomponent component as given


class testconnectdialog extends react.component {
    render() {
      const {isopen, onok} = this.props;
  
      return (
        <dialog
            isopen={isopen}
            onclose={this.props.handleclose}
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
            >
            <dialogcontent>
                <dialogcontenttext id="alert-dialog-description">
                 test
                </dialogcontenttext>
            </dialogcontent>
            <dialogactions classname="dialog-action">
                <button onclick={this.props.handleclose} classname="primary-button">
                ok
                </button>
            </dialogactions>
        </dialog>
      ); 

    }
};

export default testconnectdialog;

score:0

in the homepage component why is isopen destructured from the prop and initialised in state. you have to use one, using both is confusing, you are working with that on the state but passing the one from the prop


Related Query

More Query from same tag