Modal doesnt show up in React

Question

I'm new to React. This is my CustomModal:

import React from 'react';
import {useState} from "react";
import {Button, Modal} from "react-bootstrap";

const CustomModal = (props) =>{
    const [show, setShow] = useState(true);
    const handleClose = () => setShow(false);

    return (
        <div>
            <Modal show={show} animation={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>{props.message}</Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        </div>
    )
};
export default CustomModal;

I want to render it inside a class component when user submits a registration form.

class Register extends React.Component {
    state = {
        email : '',
        username: '',
        password: '',
        second_password: ''
    };
    handleSubmit = async (event) =>{
        event.preventDefault();

        const emailValidated = await this.validateEmail(this.state.email);
        const usernameValidated = this.validateUsername(this.state.username);
        const passwordValidated = this.validatePassword(this.state.password, this.state.second_password);
        let registrationComplete = false;
        if(emailValidated === true && usernameValidated === true && passwordValidated === true){
            registrationComplete = await this.register(this.state.email, this.state.username, this.state.password);
            console.log(registrationComplete);
            this.showModal("Hello World!"); //This is the function begin called to show the modal.
        }

    };
    validateUsername = (username) =>{
        return true;
    };

    validatePassword = (password, second) =>{
        return true;
    };

    validateEmail = async (email) =>{
        return true;
    };


    //This is the function that should display the modal

    showModal = (message) =>{
        return (<CustomModal message={message}/>);
    };
    

    register = async (email, username, password) =>{
        return true;
    };
    render() {
        return (
            <div className="register">
                <h1>Register</h1>
                <Form onSubmit={this.handleSubmit}>
                    <Form.Group controlId="formBasicEmail">
                        <Form.Label>Email address</Form.Label>
                        <Form.Control type="email"
                                      placeholder="Enter email"
                                      value={this.state.email}
                                      onChange={event => this.setState({email: event.target.value})}/>
                        <Form.Text className="text-muted">
                            Please make sure you've access to this mail. You'll receive an activation code here.
                        </Form.Text>
                    </Form.Group>

                    <Form.Group controlId="formPlainText">
                        <Form.Label className="form-label">Username</Form.Label>
                        <Form.Control type="text"
                                      placeholder="Username"
                                      value={this.state.username}
                                      onChange={event => this.setState({username: event.target.value})}/>
                        <Form.Text className="text-muted">
                            Please make it atleast 8 characters long.
                        </Form.Text>
                    </Form.Group>

                    <Form.Group controlId="formBasicPassword">
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password"
                                      placeholder="Password"
                                      value={this.state.password}
                                      onChange={event => this.setState({password: event.target.value})}/>
                        <Form.Text className="text-muted">
                            Please make sure it's atleast 8 characters long and uses a mix of letters and numbers.
                        </Form.Text>
                    </Form.Group>

                    <Form.Group controlId="formBasicPassword">
                        <Form.Label>Retype Password</Form.Label>
                        <Form.Control type="password"
                                      placeholder="Password"
                                      value={this.state.second_password}
                                      onChange={event => this.setState({second_password: event.target.value})}/>
                    </Form.Group>


                    <Button variant="primary" type="submit">
                        Register
                    </Button>
                </Form>
            </div>
        );
    }
}
export default Register;

All the values are correct and the console log shows true but the Modal doesn't display. What can I try next?

Answer 1

There are some issues on your code

1. The customModal has to be part of the render of the Register component
2. There should be a state to track the status of the modal from the Register component
3. Also the register has to be notified when the Modal closes

I have modified your code and working. You can find it live here