Code snippet for react modal window

index.html

class App extends Component {
  render() {
    return (
      <div>
        <ActionButton onChange={(accepted) => accepted ? console.log('The user accepted') : console.log('The use declined')}>
          Пробвай ме
        </ActionButton>
      </div>
    );
  }
}

export class ActionButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      opened: false
    };
  }

  action(accepted) {
    this.setState({ opened: false });
    this.props.onChange(accepted);
  }

  render() {
    return (
      <div>
        <span className="button" onClick={() => this.setState({ opened: true })}>{this.props.children}</span>
        {this.state.opened ?
          <ClickConfirm >
            <div>Тази операция извършва промени по базата, моля потвърдете.</div>
            <div>
              <span className="button" onClick={() => this.action(true)}>Добре</span>
              <span className="button" onClick={() => this.action(false)}>Отказ</span>
            </div>
          </ClickConfirm> : null}
      </div>
    );
  }
}

export class ClickConfirm extends React.Component {
  render() {
    return (
      <div className="backdrop">
        <div className="m">
          {this.props.children}
        </div>
      </div>
    );
  }
}

styless.css

.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(59, 59, 59, 0.5);
  z-index: 1;
  color: white;
  animation: .1s ease-in fade-in;
}

.m {
  opacity: 1;
  width: 60%;
  height: 6em;
  margin: 2rem auto;
  background-color: whitesmoke;
  color: #222;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}