I am new to Reactjs, and trying to edit a legacy application which uses the old version 16.

How can I make an alert show only one time ?

I need to show only when the page loads and not when I call edit, delete and add modals.

I create the showTotals variable at the constructor :

export default class List extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            showTotals: true,
        };          
    }

Into the render method I call the alert if some condition and showModals are true :

render (){
  if( total_values > contract_total && showModals ) {
        swal('', 'Total is greater than ... ', 'error');                                    
  } 
}

I only need to call the alert when the page loads.

I do not want to call the alert into the actions like delete, add and edit.

Can i change the showTotals to false into the existing onClick event?

   <Button
        onClick={() => this.handleDelActClick(row, rowId)}
        >
        <i>delete</i>
        </Button>

I try to set inside the method but the alert still shows :

handleDelActClick = (row, id) => {
        this.setState({ showTotals: false });
            if (data) {
                this.delItem(row.id, id);
            }       
    };

I am new to Reactjs, and trying to edit a legacy application which uses the old version 16.

How can I make an alert show only one time ?

I need to show only when the page loads and not when I call edit, delete and add modals.

I create the showTotals variable at the constructor :

export default class List extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            showTotals: true,
        };          
    }

Into the render method I call the alert if some condition and showModals are true :

render (){
  if( total_values > contract_total && showModals ) {
        swal('', 'Total is greater than ... ', 'error');                                    
  } 
}

I only need to call the alert when the page loads.

I do not want to call the alert into the actions like delete, add and edit.

Can i change the showTotals to false into the existing onClick event?

   <Button
        onClick={() => this.handleDelActClick(row, rowId)}
        >
        <i>delete</i>
        </Button>

I try to set inside the method but the alert still shows :

handleDelActClick = (row, id) => {
        this.setState({ showTotals: false });
            if (data) {
                this.delItem(row.id, id);
            }       
    };

• javascript
• reactjs

Share Improve this question Follow edited Jan 31 at 13:53 Ângelo Rigo asked Jan 31 at 11:43 Ângelo RigoÂngelo Rigo 2,1671010 gold badges4040 silver badges7373 bronze badges 1

• if you want to call it only when the page loads, why you are not calling it in componentDidMount? react.dev/reference/react/Component#componentdidmount – Oki Commented Jan 31 at 13:04

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

If you use the componentDidMount() {} and put you logic inside the parenthesis like so:

// Your imports
export default class List extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            showTotals: true, // Ensure it's true only on the first render
        };
    }

    componentDidMount() {
        const { total_values, contract_total } = this.props;

        // Show alert only on first page load
        if (total_values > contract_total) {
            swal("", "Total is greater than ...", "error").then(() => {
                this.setState({ showTotals: false });
            });
        }
    }

    handleDelActClick = (row, id) => {
        this.setState({ showTotals: false }, () => {
            if (this.props.data) {
                this.delItem(row.id, id);
            }
        });
    };

    render() {
        return (
            <div>
                <Button onClick={() => this.handleDelActClick(row, rowId)}>
                    <i>delete</i>
                </Button>
            </div>
        );
    }
}

It should do the job.