reactstrap

import React, { Component } from 'react'
import { Button, Container, Alert} from 'reactstrap'
export default class App extends Component {

  constructor(props){
    super(props)
    this.state={
      visibile:true
    }
  }
  toggle=()=>{
    this.setState({visibile:!this.state.visibile})
  }
  render() {
    return (
      <Container>
        <Button color='primary' active={false} block={true} onClick={this.toggle}>Submit</Button>{' '}
        <Button color='secondary'>Submit</Button>{' '}

        <Button color='danger' outline={true}>Submit</Button>{' '}
        <Button color='success' size='sm'>Submit</Button>{' '}
        <Button color='info' size='lg' outline={true}>Submit</Button>{' '}
        <Button color='warning'>Submit</Button>{' '}
        <Button color='dark'>Submit</Button>{' '}
        <Button color='light'>Submit</Button>{' '}
        <Alert color='danger' isOpen={this.state.visibile} toggle={this.toggle} size='sm' >Hello</Alert>
      </Container>
    )
  }
}

...................................................................................................................................................................................................................................
Example with Alert # 1

import React, { Component } from 'react'
import { Container, Button, Alert } from 'reactstrap'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      toggleVisible: true
    }
  }

  toggleVisibleMethod = () => {
    this.setState({ toggleVisible: !this.state.toggleVisible })
  }

  render() {
    return (
        <Container>
        <Button color='primary' onClick={this.toggleVisibleMethod}>primary</Button>
        <Alert isOpen={this.state.toggleVisible} toggle={this.toggleVisibleMethod}> Alert Here!                  </Alert>
        </Container>
    )
  }
}

.................................................................................................................................................................................................................................

Example with Modal #2

import React, { Component } from 'react';

import { Container, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class App extends Component {

  state = {

    modalIsOpen: false

  }

  toggleModal = () => {

    this.setState({

      modalIsOpen: !this.state.modalIsOpen

    });

  }

  render() {

    return (

      <Container>

        <Button color="primary" onClick={this.toggleModal}>Open Modal</Button>

        <Modal isOpen={this.state.modalIsOpen}>

          <ModalHeader toggle={this.toggleModal}>Modal Title</ModalHeader>

          <ModalBody>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem fugiat perspiciatis sint, nostrum labore nobis quidem sed impedit quae quisquam corrupti, libero commodi a quod pariatur quo qui. Id?</ModalBody>

          <ModalFooter>

            <Button color="primary">Sign Up</Button>

            <Button color="secondary" onClick={this.toggleModal}>Cancel</Button>

          </ModalFooter>

        </Modal>

      </Container>

    );

  }

}

export default App;

..