Best way to conditional render React components an

Question

I have an app showing confirmation modal on delete.
Here is the full code:
https://codesandbox.io/s/vkz5xm8r0
In components/Modal.js I have some conditional render. What if I want to style the whole modal based on those conditions? What is the best way to do so?
Eg. how to style the whole modal so it changes appearance like so:
https://imgur.com/a/pK5Zu

Answer 1

Reorganised the code a bit. I believe this makes the code cleaner and easier to style. And hopefully answers your question :)

// 'components/Modal.js'
import React from 'react';
import ReactLoading from 'react-loading';

class Modal extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      status: 'prompting' //'prompting', 'deleting', 'deleted'
    };
  }
  removeUser = () => {
    this.setState({ status: 'deleting' });
    // simulate async loading action
    setTimeout(
      () =>
        this.setState({
          status: 'deleted'
        }),
      2000,
    );
    //simulate promise (function above then this below)
    setTimeout(() => this.props.removeUser(this.props.data), 2001);
  };
  closeModal = () => {
    this.props.closeModal();
    this.setState({ status: 'prompting' });
  };
  render() {
    const { id, name } = this.props.data;

    const {status} = this.state;
    // The gray background
    const backdropStyle = {
      position: 'fixed',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      backgroundColor: 'rgba(0,0,0,0.3)',
      padding: 50,
    };

    // The modal "window"
    const modalStyle = {
      backgroundColor: '#fff',
      borderRadius: 3,
      maxWidth: 400,
      minHeight: 200,
      margin: '0 auto',
      padding: 30,
    };

    const modal = {
      "prompting": (<div className="prompting">
                      <h5>You want to delete user {id} : {name}</h5>
                      <button onClick={this.removeUser}>Delete</button>
                      <button onClick={this.closeModal}>Cancel</button>
                    </div>
      ),
      "deleting": (<div className="deleting">
                      <h5> Deleting </h5>
                      <div>
                        <ReactLoading type="spin" color="#444" />
                      </div>
                    </div>),
      "deleted": (<div className="deleted">
                    <h5> Deleted </h5>
                    <button onClick={this.closeModal}>OK</button>
                  </div>)
    };

    if(this.props.displayModal){
      return (
        <div className="backdrop" style={backdropStyle}>
          <div className="modal" style={modalStyle}>
            {modal[status]}
          </div>
        </div>
      );
    }
    else
      return null;

  }
}

export default Modal;