Reputation: 67
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
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