Bdtjtk

I am using ReactJS and a Bootstrap modal. I can open the modal just fine, but I would like it to close after 3 seconds.

I tried setTimeout as you can see below, but it doesn't close. I gave setTimeout a callback of handleClose, but after console logging, I can see that handleClose is not being called.

Here is the ItemDetailView Component:

    import React, { Component } from 'react';

import { connect } from 'react-redux';

import { Card, CardImg, CardText, CardBody,

  CardTitle, CardSubtitle } from 'reactstrap';

import { addToCart } from '../actions/addToCartAction';

import './ItemDetailView.css';

import ItemAddedModal from './ItemAddedModal';





class ItemDetailView extends Component {

  constructor(props) {

    super(props);



    this.state = {

      modalOpen: false

    }

    // this.toggle = this.toggle.bind(this);

  };



  // toggle() {

  //   this.setState({

  //     modalOpen: !this.state.modalOpen

  //   });

  // };



  handleOpen = () => {

    console.log("Cart Open", this.state.modalOpen);

    this.setState({ 

      modalOpen: true 

    },() => {setTimeout(this.handleClose(), 3000)});

    // setTimeout(this.handleClose(), 3000);

  };



  handleClose = () => {

    this.setState({

      modalOpen: false 

    });

    console.log('handleClose fired!')

  };



  addToCartHandler = () => {

    this.props.addToCart(this.props.card);

    console.log('addToCart++', this.props.quantity);

    this.handleOpen()

    // this.setState({

    //   modalOpen: true

    // });

  };



  render() {

    if (!this.props.title) {

      return null;

    }



    return (

      <div className="detail-view-wrapper">

        <Card className="text-center detail-view-card">

          {/* <CardImg top width="100%" src={"/" + this.props.img} alt={this.props.title} /> */}

          <CardImg className="detail-view-img" top width="100%" src={"/" + this.props.img} alt={this.props.title} />

          <CardBody>

            <CardTitle className={"card-title"}>{this.props.title}</CardTitle>

            <CardSubtitle>${this.props.price}</CardSubtitle>

            <CardText>{this.props.description}</CardText>

            {/* <SvgIcon className="cart-icon" onClick={() => this.addToCartHandler()} >

              <AddShoppingCart />

            </SvgIcon> */}

            <button className= "add-to-cart-button" onClick={() => this.addToCartHandler()}>Add To Cart</button>

          </CardBody>

        </Card>

        <ItemAddedModal open={this.state.modalOpen} toggle={this.toggle} />

      </div>

    );

  }

}



const mapStateToProps = state => {

  if (!state.data.cardData) {

    return {

      title: null,

      img: null,

      description: null,

      price: null

    }

  }

  const card = state.data.cardData[state.card.id]

  return {

    card: card,

    title: card.title,

    id: card.id,

    img: card.img,

    description: card.description,

    price: card.price,

    quantity: 0

  };

}



export default connect(mapStateToProps, { addToCart })(ItemDetailView);

Here is the ItemAddedModal:

import React from 'react';

import { Modal, ModalHeader } from 'reactstrap';

import './ItemAddedModal.css';



class ItemAddedModal extends React.Component {



  render () {

    return (

      <div>

          <Modal className="item-added-modal" isOpen={this.props.open} toggle={this.props.toggle} className={this.props.className}>

            <ModalHeader className="item-added-modal-header">

              <p className="item-added-modal-p">Item Added To Cart</p>

            </ModalHeader>

          </Modal>

        </div>

    )

  };

}

export default ItemAddedModal;

To perform an action after a state is set, we need to pass a callback to setState.

 this.setState({

  modalOpen: true

},()=>{

console.log(this.state.modalOpen);});