CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
Robby Hoover
Robby Hoover

Reputation: 67

React-Bootstrap Alert firing "onClose" immediately upon opening

Using React, Next.JS and React-Bootstrap

So, i'm trying to just create a dismissable alert, like in the React-Bootstrap documentation, however, it would not close for me. Upon further inspection (that's what the console.logs arefor), i noticed that my Alert component is lauching "onClose" immediately upon being opened. That's a problem. Further more, i've also noticed that no matter what i pass as "onClosing", it reads in the console as "undefined", rather than outputting the function i sent it. This is made further weird, by the fact that just two lines down, im sending the same function, with opposite state to another component (where i signal the website to open the alert), and it's working completely fine. I've been at this for a couple hours now, and i'm pretty stuck. Any help would be appreciated!

My state variable at init

const [showAlert, setShowAlert] = useState(false)

Here's my Alert component

import {Alert, Button, ButtonGroup, ButtonToolbar, Collapse} from 'react-bootstrap'
import PropTypes  from 'prop-types'


const MyAlert = ({onClosing, alertHeading, alertText, alertVariant, methodToExecute, buttonText}) => {
    console.log(onClosing)
    
    return (
        
        <Alert variant={alertVariant} onClose={()=> onClosing} dismissible style={{margin:'1rem'}}>
            <Alert.Heading>{alertHeading}</Alert.Heading>
            <p>{alertText}</p>  
            <ButtonToolbar>
                <ButtonGroup style={{margin:'.5rem .5rem .5rem 0'}}>
                    <Button variant={alertVariant} onClick={()=> {methodToExecute!=undefined ? methodToExecute : onClosing}}>{buttonText}</Button>
                </ButtonGroup>
                <ButtonGroup style={{margin:'.5rem'}}>
                    <Button variant={alertVariant} onClick={() => onClosing}>Close</Button>
            </ButtonGroup>
            </ButtonToolbar>
            
        </Alert>
        
    )
}

MyAlert.defaultProps = {
    buttonText: 'OK'
}

/* MyAlert.propTypes = {
    onClosing: PropTypes.func
} */

export default MyAlert

And here's my Implementation of it

    {showAlert ? <MyAlert onClosing={() => setShowAlert(false), console.log("closing")} alertVariant="danger" alertHeading="Test Alert" alertText="This is just a test alert."/> : ''}

The other component implementation i'm sending that setShowAlert to

    <ParameterList onRandomList={() => randomListOfInstruments()} onNewList={ () => addNewInstruments()} onClear={() => setShowAlert(true)}></ParameterList>

Upvotes: 1

Views: 955

Answers (1)

Kevin Haxhi
Kevin Haxhi

Reputation: 498

Your usage of MyAlert component is probably the issue here:

{showAlert ? <MyAlert onClosing={() => setShowAlert(false), console.log("closing")} alertVariant="danger" alertHeading="Test Alert" alertText="This is just a test alert."/> : ''}

You are passing a value to the onClosing, alertHeading, alertText, alertVariant props of MyAlert, while the actual props of MyAlert are:

{onClosing, alertHeading, alertText, alertVariant, methodToExecute, buttonText}

Among those, you also have methodToExecute, which you are using as a condition when loading your alert:

<Button variant={alertVariant} onClick={()=> {methodToExecute!=undefined ? methodToExecute : onClosing}}>{buttonText}</Button>

Basically, since your methodToExecute is always undefined, this button will always activate onClosing when clicked.

The solution is to add all the necessary props when using MyAlert, or at least include methodToExecute function in the props you pass to it, so your button will bind that to the onClick function instead.

As for onClosing which you are passing as a prop to MyAlert, you also need to fix that, because you are calling two functions separated by comma ',' on its implementation:

onClosing={() => setShowAlert(false), console.log("closing")}

The proper implementation would be:

onClosing={() => {
  setShowAlert(false);
  console.log("closing");
}}

Upvotes: 2

Related Questions