alexysbike

import React, { useState, useCallback, useEffect } from 'react';
import {render} from "react-dom";

let resolve;
const Confirm = ({ refShow }) => {
  const [isOpen, setIsOpen] = useState(false);
  const handleCancel = useCallback(() => {
    setIsOpen(false);
    resolve(false);
  }, []);

alexysbike

// imports
import confirmService from './confirmService';

class App extends Component {
 // constructor
 async removeItem({ target: { value } }) {
   const result = await confirmService.show();
   if (result) {
     const items = this.state.items.filter((item, index) => index !== parseInt(value));
     this.setState({ items });

alexysbike

import Confirm from './Confirm';

export default Confirm.create();

alexysbike

let resolve;

class Confirm extends Component {
  // rest of the componet
  handleCancel() {
    this.setState({isOpen: false});
    resolve(false);
  }

  handleConfirm() {

alexysbike

class Confirm extends Component {
  static create() {
    const containerElement = document.createElement('div');
    document.body.appendChild(containerElement);
    return render(<Confirm/>, containerElement);
  }

  // .., rest of the component
}

alexysbike

import React, { Component } from 'react';
import { render } from 'react-dom';

class Confirm extends Component {
 constructor() {
   super();

   this.state = {
     isOpen: false,
   };

alexysbike

import React, {Component} from 'react';
import {render} from 'react-dom';
import 'bulma';

class App extends Component {
  constructor() {
    // rest of constructor
    this.removeItem = this.removeItem.bind(this);
  }

alexysbike

class App extends Component {
  // constructor

  render() {
    return (
      <div className="container-fluid">
        <h1 className="is-size-2">React Confirm as a Service</h1>
        <p>try to delete one</p>
        <h2>TODO:</h2>
        <div className="columns is-mobile is-multiline">

alexysbike

class App extends Component {
  constructor() {
    super();
    this.state = {
      items: [
        'Eat hamburger',
        'Drink coke',
        'Go to bathroom'
      ]
    };

alexysbike

import React, { Component } from 'react';
import { render } from 'react-dom';
import 'bulma';

class App extends Component {
  render() {
    return (<div className="container-fluid">Hello </div>);
  }
}