How to add a simple popup in REACT?-CodePudding

I am building an app using React. I am new to it. So here I want to make a popup that will pop when a button is clicked. It is basically a login/signup system. How do I add the popup? Should I install a package?

This is the code :

import React, { Component } from "react";
import "./login.css";

class Screen extends Component {
  state = {
    name: "",
    password: "",
  };
  function1 = (event) => {
    this.setState({ name: event.target.value });
  };

  function2 = (event) => {
    this.setState({ password: event.target.value });
  };
  render() {
    return (
      <div>
        <div>
          <ul>
            <li>
              <p id="logo">My website </p>
            </li>
            <li>
              <a >Home</a>
            </li>
            <li>
              <a onClick={this.function1}>Page 1</a>
            </li>
            <li>
              <a>Page 2</a>
            </li>
            <li>
              <a>Page 3</a>
            </li>
            <li>
              <a id="loggedinas">Logged in as: {this.state.name}</a>
            </li>
          </ul>
        </div>
        <h1>This is the title</h1>

        <h2>Login/Sign Up</h2>
        <input type="email" onChange={this.function1} maxLength="20"></input>
        <br />
        <br />
        <input type="password" onChange={this.function2}></input>
        <h1> logged in as: {this.state.name}</h1>
      </div>
    );
  }
}

export default Screen;

Css :

button {
  background-color: aqua;
}

body {
  background-color: white;
}

/* Navbar */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

#logo {
  color: white;
  padding-left: 10px;
  font-weight: bold;
}

#loggedinas {
  color: white;
  font-style: italic;
  font-weight: bold;
}

/* Navbar end */

Is there a simple way to do that?

I hope it is clear, Thank you in advance.

CodePudding user response：

The first step is to import packages.

import React from "react";
import { Modal, Button, Form } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";

Then in App function you can set state to show and hide the modal popup.

function App() {
  const [show, setShow] = useState(false);

  const handleShow = () => setShow(true);

  return (
    <>
      <div
        className="d-flex align-items-center justify-content-center"
        style={{ height: "100vh" }}
      >
        <Button variant="primary" onClick={handleShow}>
          Launch Form modal
        </Button>
      </div>
      <Modal show={show}>
        <Modal.Header closeButton>
          <Modal.Title>Login Form</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <></>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary">Close Modal</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

This is just an example, hope this helps you.

CodePudding user response：

Install React bootstrap, it is easy to do. Check in https://react-bootstrap.github.io/components/modal/