CODEWITHSUNDEEP
javascriptreactjs
Christian LSANGOLA
Christian LSANGOLA

Reputation: 3307

Component does not update after props change with componentDidUpdate

I've got a component that trigger an modal window when users click on the delete record in the UI,but the problem is that, the lifecycle method componentDidUpdate is only called once,th first time. For exemple,is i click on the delete Button,the state is updated in the child component that holds the Modal component,the all the other actions after the first one dont trigger Modal show.

enter image description here

Here is my code:

import React, { Component } from 'react';
import { Button, Header, Icon, Modal } from 'semantic-ui-react';

class ConfirmationBox extends Component {
  state = { isOpen: false };
  componentDidMount() {
    this.setState({ isOpen: this.props.isOpen });
  }

  componentDidUpdate(prevProps, nextProps) {
    if (prevProps.isOpen !== this.props.isOpen) {
      this.setState({ isOpen: this.props.isOpen });
    }
  }

  closeConfirmation = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  onConfirmDelection = () => {
    this.closeConfirmation();
  };

  onCancelDelection = () => {
    this.closeConfirmation();
  };
  render() {
    return (
      <Modal open={this.state.isOpen} basic size='small'>
        <Header icon='delete' content='Confirmer suppression' />
        <Modal.Content>
          <p>Souhaitez-vous vraiment supprimer {this.props.names}?</p>
        </Modal.Content>
        <Modal.Actions>
          <Button onClick={this.onCancelDelection} basic color='red' inverted>
            <Icon name='remove' /> No
          </Button>
          <Button onClick={this.onConfirmDelection} color='green' inverted>
            <Icon name='checkmark' /> Yes
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }
}

export default ConfirmationBox;

Upvotes: 1

Views: 855

Answers (3)

IT&#39;s Bruise
IT&#39;s Bruise

Reputation: 834

You don't have to store isOpen in state and in props. Only single source of true is correct way. For example the next way is stored isOpen in props

import React, { Component } from 'react';
import { Button, Header, Icon, Modal } from 'semantic-ui-react';

class ConfirmationBox extends Component {
  onConfirmDelection = (data) => {
    const { closePopup, confirmDeletion } = this.props;

    closePopup();
    confirmDeletion(data);
  }

  render() {
    const { isOpen, closePopup, names } = this.props;

    return (
      <Modal open={isOpen} basic size='small'>
        <Header icon='delete' content='Confirmer suppression' />
        <Modal.Content>
          <p>Souhaitez-vous vraiment supprimer {names}?</p>
        </Modal.Content>
        <Modal.Actions>
          <Button onClick={closePopup} basic color='red' inverted>
            <Icon name='remove' /> No
          </Button>
          <Button onClick={this.onConfirmDelection} color='green' inverted>
            <Icon name='checkmark' /> Yes
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }
}

export default ConfirmationBox;

Upvotes: 2

Aleksey Polonka
Aleksey Polonka

Reputation: 583

in fact, you don't update the isOpen property in the parent component when trigger closeConfirmation. It just updates the isOpen in the ConfirmationBox state. That's why prevProps.isOpen === this.props.isOpen, they are both TRUE. You should move closeConfirmation to the parent component and use isOpen from props.

Upvotes: 0

Ernesto
Ernesto

Reputation: 4272

On your componentDidUpdate method why you have a nextProps param if you are using this.props

Upvotes: 0

Related Questions