CODEWITHSUNDEEP
javascriptreactjs
malmatalla
malmatalla

Reputation: 19

Modal rendering several times

We are developing an application which is for restaurants. The dishes can have variations (medium rare or an ice-cream flavor for example) and in the Order view, we can also increment order-items with variations. The problem I am having is that the modal for choosing the variations renders several times, and therefore the last element is always chosen when adding a new dish with variations.

My code for the modal looks like this: 

    getDish(dish){
    const extraId = Math.floor(Math.random() * 99999);  
    if(dish.variations.length > 0){
        const url = '/dish/' + dish.dishId; 
        axios.get(url)
            .then(res => {
                console.log("Will render a modal");
                this.setState({
                    showModal: true,
                    modalContent: <Modal 
                            identifier={'modal-' + extraId}
                            show={true}
                            modalClose={this.closeModal}>
                            <Variations 
                                dish={res.data} 
                                extraIdentifier={extraId}
                            />
                            <br />
                            <div className={classes.ButtonContainer}>
                                <Button clicked={() => this.onIncrementMenuItemWithVariation(res.data, extraId)}>Lägg till</Button>
                            </div>
                        </Modal>,
                });
            })
            .catch(error => {
                console.log("error", error);
            });
    }else{
        this.onIncrementMenuItem(dish); 
    }
}

and in the components render method I simply display modalContent

    {this.state.modalContent}

The console.log "Will render a modal" is only called one time, but I got another log in the modal component which is called several times.

Upvotes: 0

Views: 460

Answers (1)

Valerii
Valerii

Reputation: 2317

Remove modal content from the state and add to JSX in render something like this:

<>
    <other elements/>
    <Modal show={this.sate.showModal} modalClose={this.closeModal}>
                        .....
    </Modal>
</>

Upvotes: 1

Related Questions