I'm getting mad from that. I would like to get rid of that warning:
index.js:1446 Warning: Received
true
for a non-boolean attributeshow
.If you want to write it to the DOM, pass a string instead: show="true" or show={value.toString()}. in div (created by Tooltip)
I'm making a validation form for registrating users. I show tooltip, when password validation fails - when passwords in two inputs are different.
I have attatchRefs in the constructor:
this.attachRefPass = targetPass => this.setState({ targetPass });
Next, between other begin values in constructor:
this.state = {
[...]
password: "",
password2: "",
showTooltipPass: false,
[...]
}
Validation method:
passwordValidation = () => {
this.setState({
showTooltipPass: this.state.password === this.state.password2
});
};
And the Form and Tooltip components:
<Form.Group as={Col} controlId="formGridUsername">
<Form.Label>Username</Form.Label>
<Form.Control
required
name="username"
placeholder="Username"
onChange={this.onChangeUsername}
ref={this.attachRefUser}
/>
<Overlay
target={targetUser}
show={showTooltipUser}
placement="right"
>
{props => (
<Tooltip id="overlay-example" {...props}>
There is one username like that already in the system!
</Tooltip>
)}
</Overlay>
</Form.Group>
The Tooltip is from react-boostrap: https://react-bootstrap.github.io/components/overlays/
It is the bug that was fixed that Overlay outputs show
value as Boolean
You may fix the issue localy with overriding show
prop
{props => (
<Tooltip id="overlay-example" {...props} show={props.show.toString()}>
There is one username like that already in the system!
</Tooltip>
)}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With