CODEWITHSUNDEEP
javascriptreactjsalertreact-bootstrap
Garet Jax
Garet Jax

Reputation: 1171

Make react-bootstrap Alert invisible initially

I am using versions:

[email protected]
[email protected]

I am trying to create an alert that is initially invisible. According to the documentation, the show attribute is the right one to use, but it doesn't seem to be working.

These are the things I have tried, but none have work:

<Alert variant="danger" show="false">Passwords must match</Alert>
<Alert variant="danger" defaultShow="false">Passwords must match</Alert>
<Alert variant="danger" show=false>Passwords must match</Alert>
<Alert variant="danger" defaultShow=false>Passwords must match</Alert>

Any ideas would be much appreciated. Thanks a lot.

Upvotes: 2

Views: 361

Answers (4)

ProblemsEverywhere
ProblemsEverywhere

Reputation: 547

You can use an attribute in state, so, if you change the state, you force your app to re render, and the alert will be displayed

<Alert variant="danger" show={this.state.show}>Passwords must match</Alert>

Upvotes: 1

Alok Mali
Alok Mali

Reputation: 2881

You are using false as a string but the show attribute accepts a boolean value. use 

show={false}

Instead of

show="false"

Upvotes: 1

Achraf C.
Achraf C.

Reputation: 427

Try to modify the show from a string to a boolean just like this

<Alert variant="danger" show={false}>Passwords must match</Alert>

Upvotes: 2

Will Jenkins
Will Jenkins

Reputation: 9907

You're using a string for false. Use a javascript false with braces instead:

<Alert variant="danger" show={false}>Passwords must match</Alert>

Upvotes: 4

Related Questions