Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Warning with React Bootstrap tooltip: Received `true` for a non-boolean attribute `show`

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 attribute show.

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/

like image 336
kubwosz Avatar asked Jun 08 '19 12:06

kubwosz


1 Answers

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>
)}    
like image 87
JIoJIaJIu Avatar answered Oct 09 '22 20:10

JIoJIaJIu