React Button Click to open Popup-CodePudding

I don't have much experience with React. What I want to do is to be able to open a popup when I press the button. I've looked through a lot of examples but couldn't figure out why it wasn't. Here is my code;

Popup.js;

import React from "react";

const Popup = props => {
  return (
    <div className="popup-box">
      <div className="box">
        <span className="close-icon" onClick={props.handleClose}>x</span>
        {props.content}
      </div>
    </div>
  );
};

export default Popup;

Home.js;

 constructor(props) {
            super(props);
    
            this.state = {
                users: [],
                currentUser: { id: null, name: '', username: '', password: '', command: '', status: '', cpu: null, mac: '', info: '' },
                editing: false,
                editingCommandStop: false,
                editingCommandSleep: false,
                editingCommandStart: false,
                isOpen: false
    
    
            }
        }
    
        togglePopup = () => {
            this.setState(
                { isOpen: true }
            )
        }

  render() {
        return (

<div>
                                <input
                                    type="button"
                                    value="Click to Open Popup"
                                    onClick={this.togglePopup}
                                />
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                {this.isOpen && <Popup
                                    content={<>
                                        <b>Design your Popup</b>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                        <button>Test button</button>
                                    </>}
                                    handleClose={this.togglePopup}
                                />}
                                
                            </div>

CodePudding user response：

isOpen is not a property of this, but of state. You have to write:

{this.state.isOpen && <Popup...

Here is the documentation in case you want to read about it yourself

CodePudding user response：

You should call state values proper way. See examples here. And also you should fix the togglePopup function:

togglePopup = () => {
    this.setState(
        { isOpen: !this.state.isOpen}
    )
}

So it'll be changed to false when you call it in the handleClose function.

CodePudding user response：

isOpen was in the State.. you need to access it as this.state.isOpen in your return Statement

 {this.state.isOpen && <Popup content={<></>}