React Button Click to open Popup

Question

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>

Answer 1

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